<template>
  <div class="setTableBox">
    <!--    一级菜单-->
    <div class="oneMenuBox">
      <div class="oneMenuItem" title="浏览">
        <!--        <div class="icon el-icon-search" />-->
        <svg-icon class-name="icon size-icon" icon-class="chaxun" />
        <div class="title">浏览</div>
      </div>
      <div class="oneMenuItem" title="新增">
        <svg-icon class-name="icon size-icon" icon-class="xinzeng" />
        <div class="title">新增</div>
      </div>
      <div class="oneMenuItem" title="修改">
        <div class="icon el-icon-edit" />
        <div class="title">修改</div>
      </div>
      <div class="oneMenuItem" title="删除">
        <div class="icon el-icon-delete" />
        <div class="title">删除</div>
      </div>
      <div v-print="printObj" class="oneMenuItem" title="保存">
        <svg-icon class-name="icon size-icon" icon-class="baocun" />
        <div class="title">保存</div>
      </div>
      <div v-print="printObj2" class="oneMenuItem" title="取消">
        <svg-icon class-name="icon size-icon" icon-class="quxiao" />
        <div class="title">取消</div>
      </div>
      <div class="oneMenuItem" title="预览" @click="doPrint">
        <svg-icon class-name="icon size-icon" icon-class="yulan" />
        <div class="title">预览</div>
      </div>
      <div class="oneMenuItem" title="后退" @click="doPer">
        <svg-icon class-name="icon size-icon" icon-class="houtui" />
        <div class="title">后退</div>
      </div>
      <div class="oneMenuItem" title="前进" @click="doNext">
        <svg-icon class-name="icon size-icon" icon-class="qianjin" />
        <div class="title">前进</div>
      </div>

    </div>
    <!--    表表设计器-->
    <el-row :gutter="20" class="content">
      <!--      左侧菜单-->
      <el-col :span="1" class="leftBox">
        <div class="twoMenuBox">
          <div class="twoMenuItem" title="报表设置" @click="girdSetClick('setGirdBox')">
            <svg-icon class-name="icon size-icon" icon-class="tableSet" />
          </div>
          <div class="twoMenuItem" title="添加页" @click="girdSetClick('addPage')">
            <svg-icon class-name="icon size-icon" icon-class="addPage" />
          </div>
          <div class="twoMenuItem" title="删除当前页" @click="deletPage">
            <svg-icon class-name="icon size-icon" icon-class="deletePage" />
          </div>
          <div class="twoMenuItem" title="添加段落" @click="girdSetClick('setParagrarapdBox')">
            <svg-icon class-name="icon size-icon" icon-class="addPaeaggraph" />
          </div>
          <div class="twoMenuItem" title="删除段落" @click="deleteParagraph">
            <svg-icon class-name="icon size-icon" icon-class="shanchuwenjian" />
          </div>
          <div class="twoMenuItem" title="向上添加一行" @click="addRowTop">
            <svg-icon class-name="icon size-icon" icon-class="addRowtop" />
          </div>
          <div class="twoMenuItem" title="向下添加一行" @click="addRowBottom">
            <svg-icon class-name="icon size-icon" icon-class="addRowBottom" />
          </div>
          <div class="twoMenuItem" title="删除当前行" @click="deleteRow">
            <svg-icon class-name="icon size-icon" icon-class="shanchuhang" />
          </div>
          <div class="twoMenuItem" title="向左添加一列" @click="addLeftCol">
            <svg-icon class-name="icon size-icon" icon-class="addColLeft" />
          </div>
          <div class="twoMenuItem" title="向右添加一列" @click="addRightCol">
            <svg-icon class-name="icon size-icon" icon-class="addColRight" />
          </div>
          <div class="twoMenuItem" title="删除当前列" @click="deleteClo">
            <svg-icon class-name="icon size-icon" icon-class="shanchulie" />
          </div>
          <div class="twoMenuItem" title="单元格合并" @click="girdSetClick('cellMergeBox')">
            <svg-icon class-name="icon size-icon" icon-class="youhebingdanyuange" />
          </div>
          <div class="twoMenuItem" title="单元格拆分" @click="splitGird">
            <svg-icon class-name="icon size-icon" icon-class="chaifen" />
          </div>
          <div class="twoMenuItem" title="格式刷" @click="copyStyle">
            <svg-icon class-name="icon size-icon" icon-class="brushFormat" />
          </div>

          <div class="twoMenuItem" title="绑定数据" @click="girdSetClick('bandDataBox')">
            <svg-icon class-name="icon size-icon" icon-class="brushFormat" />
          </div>
        </div>

      </el-col>
      <!--      页面-->
      <el-col :span="16" class="centerBox">
        <div id="printMe">
          <div
            v-for="(item,index) in getData.value.Pages"
            :key="index"
            class="pagesBox"
            :style="item|getPagesStyle"
            :class="activeElement==item.ID?'isActive':''"
            @click="pageClick(item,1)"
          >
            <!--          页眉盒子-->
            <div
              class="tableBox topBox"
              :style="item|getTopTableBox"
            >
              <div
                v-for="(itemTop,itemIndex) in item.Top"
                :key="itemIndex"
                :style="itemTop|getTopItemStyle"
                class="tableItems topItem"
                :class="activeElement==itemTop.ID?'isActive':''"
                @click.stop="paragraphClick(itemTop,2)"
              >
                <div :style="itemTop|getTableBoxStyle">
                  <table class="tables topTable">
                    <tbody>
                      <tr v-for="(tableRow,tableRowIndex) in itemTop.Rows" :key="tableRowIndex">
                        <template v-for="(tableCell,tableCellIndex) in tableRow.Cells">
                          <td
                            v-if="!tableCell.IsMerge"
                            :key="tableCellIndex"
                            :style="tableCell|getCellStyle"
                            :rowspan="tableCell.RowSpan"
                            :colspan="tableCell.ColumnSpan"
                            :class="[activeElement==tableCell.ID?'isActive':'',itemTop.ClearBorder?'noBorder':'',isCopy?'crosshair':'']"
                            @click.stop="cellClick(tableCell,3)"
                          >
                            <span v-if="!itemTop.ViewWidth&&!itemTop.ViewHeight" v-html="getText(tableCell.Text)" />
                            <span v-if="itemTop.ViewWidth" v-html="getText(tableCell.Width)" />
                            <span v-if="itemTop.ViewWidth&&itemTop.ViewHeight">*</span>
                            <span v-if="itemTop.ViewHeight" v-html="getText(tableCell.Height)" />
                          </td>
                        </template>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

            </div>
            <!--          内容盒子-->
            <div class="tableBox bodyBox" :style="item|getTableStyle">
              <div
                v-for="(itemCenter, centerItemIndex) in item.Body"
                :key="centerItemIndex"
                :style="itemCenter|getTopItemStyle"
                class="tableItems"
                :class="activeElement==itemCenter.ID?'isActive':''"
                @click.stop="paragraphClick(itemCenter,2)"
              >

                <div :style="itemCenter|getTableBoxStyle">
                  <table class="tables">
                    <tbody>
                      <tr v-for="(tableRow,tableRowIndex) in itemCenter.Rows" :key="tableRowIndex">
                        <template v-for="(tableCell,tableCellIndex) in tableRow.Cells">
                          <td
                            v-if="!tableCell.IsMerge"
                            :key="tableCellIndex"
                            :style="tableCell|getCellStyle"
                            :rowspan="tableCell.RowSpan"
                            :colspan="tableCell.ColumnSpan"
                            :class="[activeElement==tableCell.ID?'isActive':'',itemCenter.ClearBorder?'noBorder':'',isCopy?'crosshair':'']"

                            @click.stop="cellClick(tableCell,3)"
                          >
                            <span v-if="!itemCenter.ViewWidth&&!itemCenter.ViewHeight" v-html="getText(tableCell.Text)" />
                            <span v-if="itemCenter.ViewWidth" v-html="getText(tableCell.Width)" />
                            <span v-if="itemCenter.ViewWidth&&itemCenter.ViewHeight">*</span>
                            <span v-if="itemCenter.ViewHeight" v-html="getText(tableCell.Height)" />
                          </td>
                        </template>

                      </tr>
                    </tbody>
                  </table>
                </div>

              </div>
            </div>
            <!--          页脚-->
            <div class="tableBox bottomBox" :style="item|getBottomStyle">
              <div
                v-for="(itemBottom,bottomItemIndex) in item.Bottom"
                :key="bottomItemIndex"
                :style="itemBottom|getTopItemStyle"
                class="tableItems"
                :class="activeElement==itemBottom.ID?'isActive':''"
                @click.stop="paragraphClick(itemBottom,2)"
              >
                <div :style="itemBottom|getTableBoxStyle">
                  <table class="tables">
                    <tbody>
                      <tr v-for="(tableRow,tableRowIndex) in itemBottom.Rows" :key="tableRowIndex">
                        <template v-for="(tableCell,tableCellIndex) in tableRow.Cells">
                          <td
                            v-if="!tableCell.IsMerge"
                            :key="tableCellIndex"
                            :style="tableCell|getCellStyle"
                            :rowspan="tableCell.RowSpan"
                            :colspan="tableCell.ColumnSpan"
                            :class="[activeElement==tableCell.ID?'isActive':'',itemBottom.ClearBorder?'noBorder':'',isCopy?'crosshair':'']"
                            @click.stop="cellClick(tableCell,3)"
                          >
                            <span v-if="!itemBottom.ViewWidth&&!itemBottom.ViewHeight" v-html="getText(tableCell.Text)" />
                            <span v-if="itemBottom.ViewWidth" v-html="getText(tableCell.Width)" />
                            <span v-if="itemBottom.ViewWidth&&itemBottom.ViewHeight">*</span>
                            <span v-if="itemBottom.ViewHeight" v-html="getText(tableCell.Height)" />
                          </td>
                        </template>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>

      </el-col>
      <!--      属性设置-->
      <el-col :span="7" class="rightBox">
        <div class="pageChooseBox">
          <div class="pageChoose">页面与段落</div>
          <el-select v-model="activeParagrapList" size="mini" placeholder="请选择页面与段落">
            <el-option
              v-for="(item,index ) in paragrarapList"
              :key="index"
              :label="item.label"
              :value="item.value"
              @click.native="activeParagrapChange(item.type,item.item)"
            />

          </el-select>
        </div>
        <!--        页面属性-->
        <div v-if="activeType==1" class="pageBox" :model="activePageData">
          <!--          <div class="title">纸张配置</div>-->
          <el-form ref="form" label-width="80px">
            <el-form-item label="纸张类型">
              <el-select v-model="activePageData.PaperSize" size="mini" placeholder="请选择纸张类型" @change="cheangPageSize">
                <el-option label="A3(297*420)" :value="1" />
                <el-option label="A4(210*279)" :value="4" />
                <el-option label="A5(148*210)" :value="3" />
                <el-option label="B5(182*257)" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="纸张方向">
              <el-select
                v-model="activePageData.PaperOrientation"
                size="mini"
                placeholder="请选择纸张方向"
                @change="changePaperOrientation"
              >
                <el-option label="横向" :value="0" />
                <el-option label="纵向" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="页眉高">
              <el-input v-model="activePageData.BorderTop" size="mini" @input="e => activePageData.BorderTop = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="页脚高">
              <el-input v-model="activePageData.BorderBottom" size="mini" @input="e => activePageData.BorderBottom = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="上边距">
              <el-input v-model="activePageData.MarginTop" size="mini" @input="e => activePageData.MarginTop = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="下边距">
              <el-input v-model="activePageData.MarginBottom" size="mini" @input="e => activePageData.MarginBottom = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="左边距">
              <el-input v-model="activePageData.MarginLeft" size="mini" @input="e => activePageData.MarginLeft = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="右边距">
              <el-input v-model="activePageData.MarginRight" size="mini" @input="e => activePageData.MarginRight = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
          </el-form>
        </div>
        <!--        段落属性-->
        <div v-if="activeType==2">
          <el-form ref="form1" :model="activeParagraphData" label-width="110px">
            <el-form-item label="段落类型">
              <el-select v-model="activeParagraphData.Type" size="mini" placeholder="请选择段落类型" @change="cheangSelect">
                <el-option label="表单" :value="0" />
                <el-option label="列表" :value="1" />
                <el-option label="交叉" :value="3" />
                <el-option label="固定行列表" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="显示方式">
              <el-select v-model="activeParagraphData.NoDataIsShow" size="mini" placeholder="请选择显示方式" @change="cheangSelect">
                <el-option label="无论如何总是不显示" :value="0" />
                <el-option label="无论如何总是显示" :value="1" />
                <el-option label="没有数据时不显示" :value="2" />
                <el-option label="存在数据时不显示" :value="3" />
                <el-option label="在末页页脚时显示" :value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否绑定数据">
              <!--              <el-select v-model="activeParagraphData.IsBindData" size="mini" @change="cheangSelect">-->
              <!--                <el-option label="否" :value="false" />-->
              <!--                <el-option label="是" :value="true" />-->
              <!--              </el-select>-->
              <el-switch
                v-model="activeParagraphData.IsBindData"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="绑定数据索引">
              <el-input v-model="activeParagraphData.BindTableIndex" size="mini" @input="e => activeParagraphData.BindTableIndex = inputFilter1(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="停靠位置">
              <el-select v-model="activeParagraphData.Alignment" size="mini" placeholder="请选择停靠位置" @change="cheangSelect">
                <el-option label="TopLeft" :value="0" />
                <el-option label="TopCenter" :value="1" />
                <el-option label="TopRight" :value="2" />
                <el-option label="MiddleLeft" :value="3" />
                <el-option label="MiddleCenter" :value="4" />
                <el-option label="MiddleRight" :value="5" />
                <el-option label="BottomLeft" :value="6" />
                <el-option label="BottomCenter" :value="7" />
                <el-option label="BottomRight" :value="8" />
              </el-select>
            </el-form-item>
            <el-form-item label="宽度">
              <el-input v-model="activeParagraphData.Width" size="mini" @input="e => activeParagraphData.Width = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="高度">
              <el-input v-model="activeParagraphData.Height" size="mini" @input="e => activeParagraphData.Height = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="左边距">
              <el-input v-model="activeParagraphData.MarginLeft" size="mini" @input="e => activeParagraphData.MarginLeft = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="右边距">
              <el-input v-model="activeParagraphData.MarginRight" size="mini" @input="e => activeParagraphData.MarginRight = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="上边距">
              <el-input v-model="activeParagraphData.MarginTop" size="mini" @input="e => activeParagraphData.MarginTop = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="下边距">
              <el-input v-model="activeParagraphData.MarginBottom" size="mini" @input="e => activeParagraphData.MarginBottom = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="清除边框">
              <!--              <el-select v-model="activeParagraphData.ClearBorder" size="mini" placeholder="请选择" @change="cheangSelect">-->
              <!--                <el-option label="是" :value="true" />-->
              <!--                <el-option label="否" :value="false" />-->
              <!--              </el-select>-->
              <el-switch
                v-model="activeParagraphData.ClearBorder"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="显示宽度:">
              <!--              <el-select v-model="activeParagraphData.ViewWidth" size="mini" placeholder="请选择" @change="cheangSelect">-->
              <!--                <el-option label="是" :value="true" />-->
              <!--                <el-option label="否" :value="false" />-->
              <!--              </el-select>-->
              <el-switch
                v-model="activeParagraphData.ViewWidth"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="显示高度">
              <!--              <el-select v-model="activeParagraphData.ViewHeight" size="mini" placeholder="请选择" @change="cheangSelect">-->
              <!--                <el-option label="是" :value="true" />-->
              <!--                <el-option label="否" :value="false" />-->
              <!--              </el-select>-->

              <el-switch
                v-model="activeParagraphData.ViewHeight"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>

          </el-form>
        </div><!--       单元格设置-->
        <div v-if="activeType==3">
          <el-form ref="form2" :model="activeCellData" label-width="120px">
            <el-form-item label="单元格类型">
              <el-select v-model="activeCellData.CellType" size="mini" placeholder="请选择段落类型" @change="cheangSelect">
                <el-option label="描述" :value="10" />
                <el-option label="图片" :value="11" />
                <el-option label="条码" :value="12" />
                <el-option label="二维码" :value="13" />
              </el-select>
            </el-form-item>
            <el-form-item label="绑定列名">
              <el-select v-model="activeCellData.ColumnName" size="mini" placeholder="请选择" @change="cheangSelect">
                <div v-if="bandData.choosheName">
                  <el-option
                    v-for="(item,index) in bandData.bandDataSelect"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    @click.native="changeColName(item)"
                  />
                </div>

                <!--                <el-option label="否" ::value="false" />-->
              </el-select>
            </el-form-item>
            <el-form-item label="对角线">
              <el-select v-model="activeCellData.Diagonal" size="mini" placeholder="请选择" @change="cheangSelect">
                <el-option label="无斜线" :value="0" />
                <el-option label="从左上角绘制对角线(TopDiagonal)" :value="1" />
                <el-option label="从左下角绘制对角线(BottomDiagonal)" :value="2" />
                <el-option label="交叉绘制对角线(DoubleDiagonal)" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="对齐方式">
              <el-select v-model="activeCellData.TextAlign" size="mini" placeholder="请选择停靠位置" @change="cheangSelect">
                <el-option label="TopLeft" :value="0" />
                <el-option label="TopCenter" :value="1" />
                <el-option label="TopRight" :value="2" />
                <el-option label="MiddleLeft" :value="3" />
                <el-option label="MiddleCenter" :value="4" />
                <el-option label="MiddleRight" :value="5" />
                <el-option label="BottomLeft" :value="6" />
                <el-option label="BottomCenter" :value="7" />
                <el-option label="BottomRight" :value="8" />
              </el-select>
            </el-form-item>
            <el-form-item label="合并方式">
              <el-select v-model="activeCellData.CellIfSameMarge" size="mini" placeholder="请选择显示方式" @change="cheangSelect">
                <el-option label="NullMerge没有指定数据类型" :value="0" />
                <el-option label="UpMerge向上内容相同自动合并" :value="1" />
                <el-option label="LeftMerge向左内容相同自动合并" :value="2" />
                <el-option label="UpLeftMerge向上向左内容相同自动合并" :value="3" />
                <el-option label="RowMerge整行内容相同自动合并" :value="4" />
                <el-option label="UpRowMerge起始列非整行合并时，考虑向上合并" :value="5" />
              </el-select>
            </el-form-item>
            <el-form-item label="向上合并依赖列">
              <el-select v-model="activeCellData.UpMergeTermsCol" size="mini" placeholder="请选择" @change="cheangSelect">
                <!--                <el-option label="是" :value="true" />-->
                <!--                <el-option label="否" :value="false" />-->
              </el-select>
            </el-form-item>
            <el-form-item label="自动延伸">
              <!--              <el-select v-model="activeCellData.IsAutoExtend" size="mini" placeholder="请选择" @change="cheangSelect">-->
              <!--                <el-option label="是" :value="true" />-->
              <!--                <el-option label="否" :value="false" />-->
              <!--              </el-select>-->

              <el-switch
                v-model="activeCellData.IsAutoExtend"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="显示文本">
              <el-input v-model="activeCellData.Text" size="mini" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="前景色">
              <el-color-picker v-model="activeCellData.ForeColor" @change="inputBlur" />
            </el-form-item>
            <el-form-item label="背景色">
              <el-color-picker v-model="activeCellData.BackColor" @change="inputBlur" />
            </el-form-item>
            <el-form-item label="格宽度">
              <el-input v-model="activeCellData.Width" size="mini" @input="e => activeCellData.Width = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="格高度">
              <el-input v-model="activeCellData.Height" size="mini" @input="e => activeCellData.Height = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="上边空白">
              <el-input v-model="activeCellData.PaddingTop" size="mini" @input="e => activeCellData.PaddingTop = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="下边空白">
              <el-input v-model="activeCellData.PaddingBottom" size="mini" @input="e => activeCellData.PaddingBottom = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="左边空白">
              <el-input v-model="activeCellData.PaddingLeft" size="mini" @input="e => activeCellData.PaddingLeft = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="右边空白">
              <el-input v-model="activeCellData.PaddingRight" size="mini" @input="e => activeCellData.PaddingRight = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="上边框">
              <el-input v-model="activeCellData.Border.Top" size="mini" @input="e => activeCellData.Border.Top = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="下边框">
              <el-input v-model="activeCellData.Border.Bottom" size="mini" @input="e => activeCellData.Border.Bottom = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="左边框">
              <el-input v-model="activeCellData.Border.Left" size="mini" @input="e => activeCellData.Border.Left = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="右边框">
              <el-input v-model="activeCellData.Border.Right" size="mini" @input="e => activeCellData.Border.Right = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="字体名称">
              <el-select v-model="activeCellData.Font.Name" size="mini" placeholder="请选择" @change="cheangSelect">
                <el-option label="宋体" value="宋体" />
                <el-option label="仿宋" value="FangSong" />
                <el-option label="黑体" value="SimHei" />
                <el-option label="苹方" value="PingFangSC-Regular" />
                <el-option label="楷体" value="KaiTi" />
                <el-option label="隶书" value="LiSu" />
              </el-select>
              <!--              <el-input v-model="activeCellData.Font.Name" size="mini" @input="e => activeCellData.Font.Name = inputFilter(e)" @blur="inputBlur" />-->
            </el-form-item>
            <el-form-item label="字号">
              <el-input v-model="activeCellData.Font.Size" size="mini" @input="e => activeCellData.Font.Size = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="加粗">
              <!--              <el-select v-model="activeCellData.Font.Bold" size="mini" placeholder="请选择" @change="cheangSelect">-->
              <!--                <el-option label="是" :value="true" />-->
              <!--                <el-option label="否" :value="false" />-->
              <!--              </el-select>-->
              <el-switch
                v-model="activeCellData.Font.Bold"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="倾斜">
              <!--              <el-select v-model="activeCellData.Font.Italic" size="mini" placeholder="请选择" @change="cheangSelect">-->
              <!--                <el-option label="是" :value="true" />-->
              <!--                <el-option label="否" :value="false" />-->
              <!--              </el-select>-->
              <el-switch
                v-model="activeCellData.Font.Italic"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="删除线">
              <!--              <el-select v-model="activeCellData.Font.Strikeout" size="mini" placeholder="请选择" @change="cheangSelect">-->
              <!--                <el-option label="是" :value="true" />-->
              <!--                <el-option label="否" :value="false" />-->
              <!--              </el-select>-->
              <el-switch
                v-model="activeCellData.Font.Strikeout"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="下划线">
              <!--              <el-select v-model="activeCellData.Font.Underline" size="mini" placeholder="请选择" @change="cheangSelect">-->
              <!--                <el-option label="是" :value="true" />-->
              <!--                <el-option label="否" :value="false" />-->
              <!--              </el-select>-->
              <el-switch
                v-model="activeCellData.Font.Underline"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="显示数据类型">
              <el-select v-model="activeCellData.FormatDataType" size="mini" placeholder="请选择显示数据类型" @change="cheangSelect">
                <el-option label="Empty" :value="0" />
                <el-option label="Text" :value="1" />
                <el-option label="Number" :value="2" />
                <el-option label="DateTime" :value="3" />
                <el-option label="Boolean" :value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="显示数据格式">
              <el-input v-model="activeCellData.Format" size="mini" @input="e => activeCellData.Format = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="空显示内容">
              <el-input v-model="activeCellData.FormatNullValue" size="mini" @input="e => activeCellData.FormatNullValue = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="布尔True显示">
              <el-input v-model="activeCellData.FormatTrueValue" size="mini" @input="e => activeCellData.FormatTrueValue = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
            <el-form-item label="布尔False显示">
              <el-input v-model="activeCellData.FormatFalseValue" size="mini" @input="e => activeCellData.FormatFalseValue = inputFilter(e)" @blur="inputBlur" />
            </el-form-item>
          </el-form>
        </div>

      </el-col>
    </el-row>
    <!--    打印需要打印的那内容-->
    <div class="printBox">
      <div id="printMe1">
        <!--        <table>-->
        <!--          <thead>-->
        <!--            <tr>-->
        <!--              <td>11</td>-->
        <!--              <td>22</td>-->
        <!--            </tr>-->
        <!--          </thead>-->
        <!--          <tbody>-->
        <!--          <tr v-for="(item ,index) in getDataPrint.value.ReportJSON.ReportDataJSON[0].Tables[1].Rows">-->
        <!--            <td style="border:1px solid #ffba00">{{index}}</td>-->
        <!--            <td style="border:1px solid #ffba00">{{item[1]}}</td>-->
        <!--          </tr>-->
        <!--          </tbody>-->
        <!--        </table>-->
        <div
          v-for="(item,index) in getData.value.Pages"
          :key="index"
          class="pagesBox"
          :style="item|getPagesStyle"
        >
          <!--          页眉盒子-->
          <div
            class="tableBox topBox"
            :style="item|getTopTableBox"
          >
            <div
              v-for="(itemTop,itemIndex) in item.Top"
              :key="itemIndex"
              :style="itemTop|getTopItemStyle"
              class="tableItems topItem"
            >
              <table class="tables topTable">
                <tbody>
                  <tr v-for="(tableRow,tableRowIndex) in itemTop.Rows" :key="tableRowIndex">
                    <template v-for="(tableCell,tableCellIndex) in tableRow.Cells">
                      <td
                        v-if="!tableCell.IsMerge"
                        :key="tableCellIndex"
                        :style="tableCell|getCellStyle"
                        :rowspan="tableCell.RowSpan"
                        :colspan="tableCell.ColumnSpan"
                        :class="[itemTop.ClearBorder?'noBorder':'',isCopy?'crosshair':'']"
                      >
                        <span v-html="getText(getDataPrint.value.ReportJSON.SysVariable[tableCell.Text])" />

                      </td>
                    </template>

                  </tr>
                </tbody>
              </table>
            </div>

          </div>
          <!--          内容盒子-->
          <div class="tableBox bodyBox" :style="item|getTableStyle">
            <div
              v-for="(itemCenter, centerItemIndex) in item.Body"
              :key="centerItemIndex"
              :style="itemCenter|getTopItemStyle"
              class="tableItems"
            >

              <div :style="itemCenter|getTableBoxStyle">
                <!--                没有绑定数据的直接显示-->
                <table v-if="!itemCenter.IsBindData" class="tables">
                  <tbody>
                    <tr v-for="(tableRow,tableRowIndex) in itemCenter.Rows" :key="tableRowIndex">
                      <template v-for="(tableCell,tableCellIndex) in tableRow.Cells">
                        <td
                          v-if="!tableCell.IsMerge"
                          :key="tableCellIndex"
                          :style="tableCell|getCellStyle"
                          :rowspan="tableCell.RowSpan"
                          :colspan="tableCell.ColumnSpan"
                          :class="[itemCenter.ClearBorder?'noBorder':'',isCopy?'crosshair':'']"
                        >
                          <span v-html="getTextShow(tableCell,item.DocumentID,itemCenter.Type)" />
                        </td>
                      </template>
                    </tr>
                  </tbody>
                </table>
                <!--                有绑定数据的判断类型 如果是表单类型（只有一行数据）-->
                <table v-else-if="itemCenter.Type==0" class="tables">
                  <tbody>
                    <tr v-for="(tableRow,tableRowIndex) in itemCenter.Rows" :key="tableRowIndex">
                      <template v-for="(tableCell,tableCellIndex) in tableRow.Cells">
                        <td
                          v-if="!tableCell.IsMerge"
                          :key="tableCellIndex"
                          :style="tableCell|getCellStyle"
                          :rowspan="tableCell.RowSpan"
                          :colspan="tableCell.ColumnSpan"
                          :class="[itemCenter.ClearBorder?'noBorder':'',isCopy?'crosshair':'']"
                        >
                          <span v-html="getTextShowFree(tableCell,itemCenter.BindTableIndex)" />
                        </td>
                      </template>
                    </tr>
                  </tbody>
                </table>
                <!--                有绑定数据的判断类型 如果是表格数据 第一行史镖头，下面是数据-->
                <!--                <div v-else-if="itemCenter.Type==1"  v-html="getTable(itemCenter.BindTableIndex,itemCenter,item)">-->

                <!--                </div>-->
                <table v-if="itemCenter.Type==1" class="tables" v-html="getTable(itemCenter.BindTableIndex,itemCenter,item)" />
              </div>

            </div>
          </div>
          <!--          页脚-->
          <div ref="priontFoot" class="tableBox bottomBox" :style="item|getBottomStyle">
            <div
              v-for="(itemBottom,bottomItemIndex) in item.Bottom"
              :key="bottomItemIndex"
              :style="itemBottom|getTopItemStyle"
              class="tableItems"
            >
              <table class="tables">
                <tbody>
                  <tr v-for="(tableRow,tableRowIndex) in itemBottom.Rows" :key="tableRowIndex">
                    <template v-for="(tableCell,tableCellIndex) in tableRow.Cells">
                      <td
                        v-if="!tableCell.IsMerge"
                        :key="tableCellIndex"
                        :style="tableCell|getCellStyle"
                        :rowspan="tableCell.RowSpan"
                        :colspan="tableCell.ColumnSpan"
                        :class="[activeElement==tableCell.ID?'isActive':'',itemBottom.ClearBorder?'noBorder':'',isCopy?'crosshair':'']"
                      >
                        <span v-html="getText(getDataPrint.value.ReportJSON.SysVariable[tableCell.Text])" />

                      </td>
                    </template>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    取消按钮点击的打印-->
    <div class="printBox">
      <div id="printMe2">
        <PrintPages :data-template="getData.value.Pages" />
      </div>
    </div>

    <!--    表格名称设置弹窗-->
    <el-dialog class="dialogBox" title="报表设置" :visible.sync="setGirdBox" width="350px">
      <el-form ref="setGird" class="dialogForm" label-width="80px" :model="setGirdBoxData">
        <el-form-item label="报表名称">
          <el-input v-model="setGirdBoxData.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="版 本 号" style="margin-top: 15px">
          <el-input v-model="setGirdBoxData.verCode" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setGirdBox = false">取 消</el-button>
        <el-button type="primary" @click="submitSetGrig">确 定</el-button>
      </div>
    </el-dialog>
    <!--    添加页面-->
    <el-dialog class="dialogBox" title="添加页面" :visible.sync="addPage" width="550px">
      <el-form ref="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="纸张类型">
              <el-select v-model="addPageData.PaperSize" size="mini" placeholder="请选择纸张类型">
                <el-option label="A3(297*420)" :value="1" />
                <el-option label="A4(210*279)" :value="4" />
                <el-option label="A5(148*210)" :value="3" />
                <el-option label="B5(182*257)" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纸张方向">
              <el-select v-model="addPageData.PaperOrientation" size="mini" placeholder="请选择纸张方向">
                <el-option label="垂直" :value="1" />
                <el-option label="水平" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="页眉高">
              <el-input v-model="addPageData.BorderTop" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="页脚高">
              <el-input v-model="addPageData.BorderBottom" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="上边距">
              <el-input v-model="addPageData.MarginTop" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下边距">
              <el-input v-model="addPageData.MarginBottom" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="左边距">
              <el-input v-model="addPageData.MarginLeft" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="右边距">
              <el-input v-model="addPageData.MarginRight" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addPage = false">取 消</el-button>
        <el-button type="primary" @click="addPageSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!--    添加段落-->
    <el-dialog class="dialogBox" title="添加段落" :visible.sync="setParagrarapdBox" width="900px">
      <el-tabs value="first">
        <el-tab-pane label="复用" name="first">
          <el-form ref="setGird" class="dialogForm" label-width="80px">
            <el-row :gutter="25">
              <el-col :span="12">
                <el-form-item label="参考模板">
                  <el-popover
                    v-model="setParagrarapdhData.isShowListData"
                    placement="bottom"
                    width="700"
                    trigger="focus"
                  >
                    <el-table
                      :data="setParagrarapdhData.chooseListData"
                      width="700px"
                      @row-click="chooseListTableClick"
                    >
                      <el-table-column show-overflow-tooltip property="name" label="名称" />
                      <el-table-column property="VerCode" label="版本号" />
                      <el-table-column property="CategoryName" label="表单类型" />
                      <el-table-column property="OptCategoryName" label="业务分类" />
                      <el-table-column property="type" label="类型" />
                      <el-table-column property="Serial" label="内部版本号" />
                    </el-table>
                    <el-input slot="reference" v-model="setParagrarapdhData.setParagrarapdListName" autocomplete="off" />
                  </el-popover>
                </el-form-item>
                <el-col :span="12">
                  <el-form-item label="添加位置">
                    <el-select v-model="setParagrarapdhData.addPosition" size="mini" placeholder="请选择停靠位置">
                      <el-option label="页眉" :value="0" />
                      <el-option label="页脚" :value="1" />
                      <el-option label="当前段落上方" :value="2" />
                      <el-option label="当前段落下方" :value="3" />
                      <el-option label="主内容下方" :value="4" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="上边距">
                    <el-input v-model="setParagrarapdhData.getDAta.MarginTop" size="mini" />
                  </el-form-item>
                  <el-form-item label="左边距">
                    <el-input v-model="setParagrarapdhData.getDAta.MarginLeft" size="mini" />
                  </el-form-item>
                  <el-form-item label="高度">
                    <el-input v-model="setParagrarapdhData.getDAta.Height" size="mini" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="停靠位置">
                    <el-select v-model="setParagrarapdhData.getDAta.Alignment" size="mini" placeholder="请选择停靠位置">
                      <el-option label="TopLeft" :value="0" />
                      <el-option label="TopCenter" :value="1" />
                      <el-option label="TopRight" :value="2" />
                      <el-option label="MiddleLeft" :value="3" />
                      <el-option label="MiddleCenter" :value="4" />
                      <el-option label="MiddleRight" :value="5" />
                      <el-option label="BottomLeft" :value="6" />
                      <el-option label="BottomCenter" :value="7" />
                      <el-option label="BottomRight" :value="8" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="下边距">
                    <el-input v-model="setParagrarapdhData.getDAta.MarginBottom" size="mini" />
                  </el-form-item>
                  <el-form-item label="右边距">
                    <el-input v-model="setParagrarapdhData.getDAta.MarginRight" size="mini" />
                  </el-form-item>
                  <el-form-item label="宽度">
                    <el-input v-model="setParagrarapdhData.getDAta.Width" size="mini" />
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="12">
                <el-form-item label="段落样式" style="width: 100%">
                  <el-select
                    v-model="setParagrarapdhData.setParagrarapdListValue"
                    style="width: calc(100% - 80px)"
                    clearable
                    size="mini"
                    placeholder="请选择页面与段落"
                    @clear="clearParagrarapdListValue"
                  >
                    <el-option
                      v-for="(item,index ) in setParagrarapdBoxList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      @click.native="setParagrapChange(item.item)"
                    />

                  </el-select>
                </el-form-item>
                <div class="showParagrarapdh">
                  <table class="topTable">
                    <tbody>
                      <tr v-for="(tableRow,tableRowIndex) in setParagrarapdhData.getDAta.Rows" :key="tableRowIndex">
                        <template v-for="(tableCell,tableCellIndex) in tableRow.Cells">
                          <td
                            v-if="!tableCell.IsMerge"
                            :key="tableCellIndex"
                            :style="tableCell|getCellStyle"
                            :rowspan="tableCell.RowSpan"
                            :colspan="tableCell.ColumnSpan"
                            v-html="getText(tableCell.Text)"
                          />
                        </template>
                      </tr>
                    </tbody>
                  </table>
                  <!--              </div>-->
                </div>

              </el-col>
            </el-row>
          </el-form>
          <div class="dialog-footer">
            <el-button @click="setParagrarapdBox = false">取 消</el-button>
            <el-button type="primary" @click="addParagraph">确 定</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="新建" name="second">
          <el-form ref="setGird" class="dialogForm" label-width="80px">
            <el-row :gutter="25">
              <el-col :span="12">
                <el-form-item label="添加位置">
                  <el-select v-model="setParagrarapdhData.addPosition" style="width: 100%" size="mini" placeholder="请选择停靠位置">
                    <el-option label="页眉" :value="0" />
                    <el-option label="页脚" :value="1" />
                    <el-option label="当前段落上方" :value="2" />
                    <el-option label="当前段落下方" :value="3" />
                    <el-option label="主内容下方" :value="4" />
                  </el-select>
                </el-form-item>
                <el-form-item label="高度">
                  <el-input v-model="setParagrarapdhData.addData.Height" size="mini" />
                </el-form-item>
                <el-form-item label="上边距">
                  <el-input v-model="setParagrarapdhData.addData.MarginTop" size="mini" />
                </el-form-item>
                <el-form-item label="左边距">
                  <el-input v-model="setParagrarapdhData.addData.MarginLeft" size="mini" />
                </el-form-item>
                <el-form-item label="行数">
                  <el-input v-model="setParagrarapdhData.addData.RowNum" autocomplete="off" />
                </el-form-item>
                <el-form-item label="行高">
                  <el-input v-model="setParagrarapdhData.addData.lineHeight" autocomplete="off" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="停靠位置">
                  <el-select v-model="setParagrarapdhData.addData.Alignment" style="width: 100%" size="mini" placeholder="请选择停靠位置">
                    <el-option label="TopLeft" :value="0" />
                    <el-option label="TopCenter" :value="1" />
                    <el-option label="TopRight" :value="2" />
                    <el-option label="MiddleLeft" :value="3" />
                    <el-option label="MiddleCenter" :value="4" />
                    <el-option label="MiddleRight" :value="5" />
                    <el-option label="BottomLeft" :value="6" />
                    <el-option label="BottomCenter" :value="7" />
                    <el-option label="BottomRight" :value="8" />
                  </el-select>
                </el-form-item>
                <el-form-item label="宽度">
                  <el-input v-model="setParagrarapdhData.addData.Width" size="mini" />
                </el-form-item>
                <el-form-item label="下边距">
                  <el-input v-model="setParagrarapdhData.addData.MarginBottom" size="mini" />
                </el-form-item>
                <el-form-item label="右边距">
                  <el-input v-model="setParagrarapdhData.addData.MarginRight" size="mini" />
                </el-form-item>
                <el-form-item label="列数">
                  <el-input v-model="setParagrarapdhData.addData.SpanNum" size="mini" />
                </el-form-item>
                <el-form-item label="列宽">
                  <el-input v-model="setParagrarapdhData.addData.cellWidth" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="dialog-footer">
            <el-button @click="setParagrarapdBox = false">取 消</el-button>
            <el-button type="primary" @click="createPargraph">确 定</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>

    <!--    合并单元格-->
    <el-dialog class="dialogBox" title="单元格合并" :visible.sync="cellMergeBox" width="400px">
      <el-form ref="setGird" class="dialogForm" label-width="120px" :model="cellMergeData">
        <el-form-item label="向右合并列数">
          <!--          <el-input v-model="cellMergeData.ColumnSpan" type="number" @input="value=value.replace(/[^0-9]/g,'')" autocomplete="off" />-->
          <el-input v-model="cellMergeData.ColumnSpan" type="number" autocomplete="off" />
        </el-form-item>
        <el-form-item label="向下合并行数" style="margin-top: 15px">
          <el-input v-model="cellMergeData.RowSpan" type="number" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cellMergeBox = false">取 消</el-button>
        <el-button type="primary" @click="submitMergeGrig">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog class="dialogBox" title="数据源绑定" :visible.sync="bandDataBox" width="800px">
      <el-form ref="setGird" class="dialogForm" label-width="80px">
        <el-row :gutter="25">
          <el-col :span="12">
            <el-form-item label="页面索引">
              <el-input v-model="activePageIndex" disabled size="mini" />
            </el-form-item>
            <el-form-item label="过程名称">
              <el-popover
                v-model="bandData.showChoose"
                placement="bottom"
                width="700"
                trigger="click"
              >
                <el-table
                  :data="bandData.chooseData"
                  width="800px"
                  @row-click="dataChooseListTableClick"
                >
                  <el-table-column property="ProcedureName" width="470" label="过程名称" />
                  <el-table-column property="ShortDescribe" label="简要描述" />
                </el-table>
                <el-input slot="reference" v-model="bandData.choosheName" autocomplete="off" />
              </el-popover>
            </el-form-item>
            <el-form-item label="参 数 值">
              <el-input v-model="bandData.parameter" size="mini" />
            </el-form-item>
            <el-form-item label="详细描述">
              <el-input v-model="bandData.Describe" type="textarea" :rows="4" placeholder="请输入内容" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div v-if="bandData.choosheName">{{ bandData.choosheName }}</div>
            <el-tree v-if="bandData.choosheName" :data="bandData.treeData" />

          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="bandDataBox = false">取 消</el-button>
        <el-button type="primary" @click="bandDataBoxAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 1.数据分页 怎么展示  2.10000万条数据

// import getData from '../test/data.json'
// import getData from '../test/data2.json'
// import getData from '../test/data3.json'
// import getData from '../test/data4.json'
// import getData from '../test/data5.json'
import getData from '../test/data6.json'
import getDataPrint from '../test/gettData.json'
// import Align from '@/views/test/algin'
// import print from 'print-js'
import PrintPages from '@/views/setTable/printPages'
export default {
  name: 'TableIndex',
  components: { PrintPages },
  filters: {
    // 获取纸张样式
    getPagesStyle(item) {
      const style = {
        'width': item.Width - item.MarginRight - item.MarginLeft + 'mm',
        'height': item.Height - item.MarginTop - item.MarginBottom + 'mm',
        'padding-top': item.MarginTop + 'mm',
        'padding-right': item.MarginRight + 'mm',
        'padding-bottom': item.MarginBottom + 'mm',
        'padding-left': item.MarginLeft + 'mm'
        // 'border-top-color': '#000',
        // 'border-right-color': '#000',
        // 'border-bottom-color': '#000',
        // 'border-left-color': '#000',
        // 'border-top-width': '0.2mm',
        // 'border-right-width': '0.2mm',
        // 'border-bottom-width': '0.2mm',
        // 'border-left-width': '0.2mm',
        // 'border-top-style': 'solid',
        // 'border-right-style': 'solid',
        // 'border-bottom-style': 'solid',
        // 'border-left-style': 'solid'
      }
      return style
    },
    // 获取外部样式
    getTopTableBox(value) {
      const style = {
        'width': value.PrintWidth + 'mm',
        'min-height': value.BorderTop + 'mm',
        'height': value.BorderTop + 'mm',
        'margin': 0
      }
      return style
    },
    // 获取table盒子样式
    getTopItemStyle(value) {
      let textLaign = 'start'
      let verticalAlign = 'top'
      const Alignment = value.Alignment
      if (Alignment === 0 || Alignment === 3 || Alignment === 6) {
        textLaign = 'left'
      } else if (Alignment === 1 || Alignment === 4 || Alignment === 7) {
        textLaign = 'center'
      } else if (Alignment === 2 || Alignment === 5 || Alignment === 8) {
        textLaign = 'right'
      }
      if (Alignment === 0 || Alignment === 1 || Alignment === 2) {
        verticalAlign = 'top'
      } else if (Alignment === 3 || Alignment === 4 || Alignment === 5) {
        verticalAlign = 'middle'
      } else if (Alignment === 6 || Alignment === 7 || Alignment === 8) {
        verticalAlign = 'bottom'
      }
      const style = {
        'width': value.Width + 'mm',
        'min-height': value.Height + 'mm',
        'height': value.Height + 'mm',
        'margin-top': value.MarginTop + 'mm',
        'margin-right': value.MarginRight + 'mm',
        'margin-bottom': value.MarginBottom + 'mm',
        'margin-left': value.MarginLeft + 'mm',
        'text-align': textLaign,
        'vertical-align': verticalAlign
      }
      return style
    },
    getTableBoxStyle(value) {
      let textLaign = 'start'
      let verticalAlign = 'top'
      const Alignment = value.Alignment
      if (Alignment === 0 || Alignment === 3 || Alignment === 6) {
        textLaign = 'start'
      } else if (Alignment === 1 || Alignment === 4 || Alignment === 7) {
        textLaign = 'center'
      } else if (Alignment === 2 || Alignment === 5 || Alignment === 8) {
        textLaign = 'end'
      }
      if (Alignment === 0 || Alignment === 1 || Alignment === 2) {
        verticalAlign = 'start'
      } else if (Alignment === 3 || Alignment === 4 || Alignment === 5) {
        verticalAlign = 'center'
      } else if (Alignment === 6 || Alignment === 7 || Alignment === 8) {
        verticalAlign = 'end'
      }
      // console.log(value.Alignment)
      const style = {
        'width': '100%',
        'height': '100%',
        'display': 'flex',
        'align-items': verticalAlign,
        'justify-content': textLaign
      }
      return style
    },
    // 获取单元格样式
    getCellStyle(value) {
      let textLaign = 'center'
      let verticalAlign = 'middle'
      const Alignment = value.TextAlign
      if (Alignment === 0 || Alignment === 3 || Alignment === 6) {
        textLaign = 'left'
      } else if (Alignment === 1 || Alignment === 4 || Alignment === 7) {
        textLaign = 'center'
      } else if (Alignment === 2 || Alignment === 5 || Alignment === 8) {
        textLaign = 'right'
      }
      if (Alignment === 0 || Alignment === 1 || Alignment === 2) {
        verticalAlign = 'top'
      } else if (Alignment === 3 || Alignment === 4 || Alignment === 5) {
        verticalAlign = 'middle'
      } else if (Alignment === 6 || Alignment === 7 || Alignment === 8) {
        verticalAlign = 'bottom'
      }
      let textDecoration = ''
      if (value.Font.Underline) {
        textDecoration = textDecoration + 'underline '
      }
      if (value.Font.Strikeout) {
        textDecoration = textDecoration + 'line-through '
      }
      if (textDecoration === '') {
        textDecoration = 'none'
      }
      // console.log(value)
      const style = {
        'width': value.Width + 'mm',
        'height': value.Height + 'mm',
        'text-align': textLaign,
        'color': value.ForeColor,
        'padding-top': value.PaddingTop + 'mm',
        'padding-right': value.PaddingRight + 'mm',
        'padding-bottom': value.PaddingBottom + 'mm',
        'padding-left': value.PaddingLeft + 'mm',
        'font-family': value.Font.Name,
        'font-size': value.Font.Size + 'mm',
        'font-weight': value.Font.Bold ? 'bold' : 'normal',
        'font-style': value.Font.Italic ? 'italic' : 'normal',
        'text-decoration': textDecoration,
        'vertical-align': verticalAlign,
        'border-top-width': value.Border.Top + 'mm',
        'border-right-width': value.Border.Right + 'mm',
        'border-bottom-width': value.Border.Bottom + 'mm',
        'border-left-width': value.Border.Left + 'mm',
        'border-color': '#000',
        'border-top-style': 'solid',
        'border-right-style': 'solid',
        'border-bottom-style': 'solid',
        'border-left-style': 'solid',
        'background-color': value.BackColor,
        'white-space': 'pre-wrap'
      }
      // if(value.IsAutoExtend){
      //   style.display='inherit'
      //
      // }
      return style
    },
    // 获取中间主内容样式
    getTableStyle(value) {
      const style = {
        'width': value.Width - value.MarginLeft - value.MarginRight + 'mm',
        'min-height': value.Height - value.BorderTop - value.BorderBottom - value.MarginTop - value.MarginBottom + 'mm',
        'margin': 0
      }
      return style
    },
    //  页脚样式
    getBottomStyle(value) {
      const style = {
        'width': value.Width - value.MarginLeft - value.MarginRight + 'mm',
        'height': value.BorderBottom + 'mm',
        'margin': 0
      }
      return style
    },
    // 表格里的文本
    getHtml(value) {
      return value.replace(/\n|\r\n/g, '<br/>')
    }
  },
  data() {
    return {
      // rightActive: 1, // 右侧出现设置属性
      getData, // 后台获取数据
      getDataPrint, // 后台获取的打印数据
      activePageData: {}, // 当前活动页面数据
      activeParagraphData: {}, // 当前活动段落数据
      activeCellData: {}, // 当前活动单元格数据
      activePageIndex: 0, // 当前激活页面
      activeType: 1, // 当前活动的元素类型 1页面 2段落 3元素
      activeElement: '', // 当前活动类名
      activeParagrapList: '', // 右侧页面与段落下拉选择ID
      activePageID: '', // 当前活动页面ID
      activeParagraphID: '', // 当前活动段落id
      activeElementID: '', // 当前活动元素ID
      setGirdBox: false, // 报表名称
      setGirdBoxData: {
        'name': getData.value.Name,
        'verCode': getData.value.VerCode
      },
      addPage: false, // 添加报表
      addPageData: { // 添加报表表单数据
        PaperSize: getData.value.Pages[0].PaperSize,
        PaperOrientation: getData.value.Pages[0].PaperOrientation,
        BorderTop: getData.value.Pages[0].BorderTop,
        BorderBottom: getData.value.Pages[0].BorderBottom,
        MarginTop: getData.value.Pages[0].MarginTop,
        MarginBottom: getData.value.Pages[0].MarginBottom,
        MarginLeft: getData.value.Pages[0].MarginLeft,
        MarginRight: getData.value.Pages[0].MarginRight
      },
      setParagrarapdBox: false, // 添加段落
      setParagrarapdhData: { // 添加段落表单数据
        setParagrarapdListName: '', // 模糊查询名称
        chooseListData: [// 表单下拉Table选择数据
          {
            name: getData.value.Name,
            VerCode: getData.value.VerCode,
            CategoryName: getData.value.CategoryName,
            OptCategoryName: getData.value.OptCategoryName,
            Module: getData.value.Module === 'LMT' ? '本地' : '线上',
            Serial: getData.value.Serial
          }
        ],
        isShowListData: false, // 下拉弹窗是否显示
        setParagrarapdListValue: '', // 选择表单的段落ID
        addPosition: 4, // 表单添加位置
        getDAta: {}, // 获取表单的数据
        addData: { // 添加表单的数据
          pragrarapdhIndex: '',
          Alignment: '4',
          MarginTop: '0',
          MarginLeft: '0',
          Height: '40',
          RowNum: '3',
          lineHeight: '10',
          MarginBottom: '0',
          MarginRight: '0',
          Width: '150',
          SpanNum: '3',
          cellWidth: '20'
        }
      },
      cellMergeBox: false, // 合并单元格弹窗是否显示
      cellMergeData: { // 合并单元格表单数据
        ColumnSpan: 0,
        RowSpan: 0

      },
      copystyleData: {}, // 复制样式数据
      isCopy: false,
      bandDataBox: false,
      bandData: {
        showChoose: false,
        chooseData: [
          {
            'DocumentID': '8902130515000001',
            'DocName': '血液筛查检测报告[带NAT]',
            'ProcedureName': 'PKG_LOC_LMT.PROC_LMT_TEST_REPORT_NAT_LOCAL',
            'ShortDescribe': '血液筛查检测报告[带NAT]',
            'Describe': '1.报表名称：血液筛查检测报告[带NAT]。\n2.存储过程返回血液筛查检测报告基本信息、血液检测总体信息、ABO血型检测信息、Rh(D)血型检测信息、异常标本信息、检测项目检测方法、初次试验待查和不合格结果及结论、重复试验结果及结论、血液检测结果明细信息、血液检测明细检测者、其它项及特殊检测项目结果明细、血液检测明细检测者信息、加样及检测设备信息、血型不符明细、常规筛查标本初次试验合格结果明细信息、常规筛查标本初次试验待查和不合格结果明细信息、常规筛查标本重复试验结果明细信息、预检标本结果明细信息、检测结果按采集日期汇总信息十九个结果集。\n3.初次试验待查和不合格结果及结论结果集汇总总结论为不合格、待查、异常终止和待鉴别的结果集信息。是否显示合格标本受参数“HasReportEligible”控制。\n4.重复试验结果及结论集汇总试验性质类型为再次试验的结果集信息。\n5.血液检测结果明细信息结果集汇总报告中包含的标本试验信息。\n6.血液检测明细检测者信息结果集汇总各试验微板的检测者信息。ABO单项检测者包含血型鉴定的检测者。检测者分行显示，相同名称显示一次。\n7.其它项及特殊检测项目结果明细结果集返回献血码、其他项结果数据信息。\n8.初次试验待查和不合格结果及结论、重复试验结果及结论和血液检测结果明细信息排列顺序为总结论升序、检测项目单项结论排序码升序、献血码升序。\n9.检测报告支持的uParams\n  0: 当前登录用户\n  1：当前系统时间\n  2：酶免生化报告人\n  3: 核酸报告人\n  4: 发布人\n  5：固定字“接收人：”\n  6：固定字“检验科留存”或“成份科留存”。同时打印两份检验报告第一份为“检验科留存”、第二份为“成分科留存。'

          },
          {
            'DocumentID': '1590217513000000',
            'DocName': '血液筛查检测报告[带NAT]',
            'ProcedureName': 'PKG_LMT_TEST_RPT01.PROC_LMT_TEST_RPT_NAT_V125',
            'ShortDescribe': '血液筛查检测报告[带NAT]V12.5',
            'Describe': '血液筛查检测报告[带NAT]V12.5'
          },
          {
            'DocumentID': '2990217332000001',
            'DocName': '血液筛查检测报告[带NAT]',
            'ProcedureName': 'PKG_LMT_TEST_RPT01.PROC_LMT_TEST_RPT_NAT_V122',
            'ShortDescribe': '血液筛查检测报告[带NAT]V12.4"',
            'Describe': '血液筛查检测报告[带NAT]V12.4'
          }
        ],
        choosheName: '',
        parameter: '',
        Describe: '',
        treeData: [
          {
            label: '结果集0[单行]',
            children: [
              { label: 'BLOOD_STATION_NAME' },
              { label: 'REPORT_TITLE' },
              { label: 'REPORT_CODE' },
              { label: 'REPORT_CODE_IL' },
              { label: 'LAB_NAME' },
              { label: 'CREATE_DATE' },
              { label: 'CREATE_MAN_NAME' }
            ]
          },
          {
            label: '结果集1[多行]',
            children: [
              { label: 'SAMPLE_SOURCE' },
              { label: 'TYPE_NAME' },
              { label: 'SAMPLE_COUNT' },
              { label: 'SAMP_HG' },
              { label: 'SAMP_BHG' },
              { label: 'SAMP_DC' }
            ]
          }
        ],
        bandDataSelect: [
          { label: '标本类型', value: '标本类型' },
          { label: '试验类型', value: '试验类型' },
          { label: '标本数量', value: '标本数量' },
          { label: '全血标本数量', value: '全血标本数量' },
          { label: '单采标本数量', value: '单采标本数量' },
          { label: '合格标本数量', value: '合格标本数量' },
          { label: '不合格标本数量', value: '不合格标本数量' },
          { label: '待查标本数量', value: '待查标本数量' },
          { label: '非异常终止数量', value: '非异常终止数量' }
        ]

      },
      printObj: {
        id: 'printMe1',
        preview: true,
        previewTitle: '打印预览', // The title of the preview window. The default is 打印预览
        popTitle: 'good print',
        // extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback(vue) {
          console.log(vue)
          console.log('正在加载预览窗口')
        },
        previewOpenCallback(vue) {
          console.log(vue)
          console.log('已经加载完预览窗口')
        },
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log(vue)
          console.log('打开之前')
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log(vue)
          console.log('执行了打印')
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        }
      },
      printObj2: {
        id: 'printMe2',
        preview: true,
        previewTitle: '打印预览', // The title of the preview window. The default is 打印预览
        popTitle: 'good print'
        // extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      }

    }
  },
  computed: {
    paragrarapList() {
      const list = []
      getData.value.Pages.map((item, index) => {
        list.push({ 'label': item.Name, 'value': item.ID, type: 1, item: getData.value.Pages[index] })
        item.Top.map((itemTop, indexTop) => {
          list.push({
            'label': '第' + parseInt(item.PageIndex + 1) + '页' + itemTop.Name,
            'value': itemTop.ID,
            type: 2,
            item: getData.value.Pages[index].Top[indexTop]
          })
        })
        item.Body.map((itemBody, bodyIndex) => {
          list.push({
            'label': '第' + parseInt(item.PageIndex + 1) + '页' + itemBody.Name,
            'value': itemBody.ID,
            type: 2,
            item: getData.value.Pages[index].Body[bodyIndex]
          })
        })
        item.Bottom.map((itemBottom, bottomIndex) => {
          list.push({
            'label': '第' + parseInt(item.PageIndex + 1) + '页' + itemBottom.Name,
            'value': itemBottom.ID,
            type: 2,
            item: getData.value.Pages[index].Bottom[bottomIndex]
          })
        })
      })
      return list
    },
    setParagrarapdBoxList() {
      let list = []
      if (this.setParagrarapdhData.setParagrarapdListName) {
        getData.value.Pages.map((item) => {
          const newItem = JSON.parse(JSON.stringify(item))
          item.Top.map((itemTop) => {
            list.push({
              'label': '第' + parseInt(newItem.PageIndex + 1) + '页' + itemTop.Name,
              'value': itemTop.ID,
              item: itemTop
            })
          })
          item.Body.map((itemBody) => {
            list.push({
              'label': '第' + parseInt(newItem.PageIndex + 1) + '页' + itemBody.Name,
              'value': itemBody.ID,
              item: itemBody
            })
          })
          item.Bottom.map((itemBottom) => {
            list.push({
              'label': '第' + parseInt(newItem.PageIndex + 1) + '页' + itemBottom.Name,
              'value': itemBottom.ID,
              item: itemBottom
            })
          })
        })
      } else {
        list = []
      }

      return list
    }
  },
  mounted() {
    this.activePageIndex = 0
    this.activePageData = this.getData.value.Pages[this.activePageIndex]

    this.activeParagrapList = this.paragrarapList[0].value
    this.activeElement = this.getData.value.Pages[this.activePageIndex].ID
    this.addRecord()
  },
  methods: {
    // select值改变
    cheangSelect() {
      this.addRecord()
    },
    // input 失去焦点
    inputBlur() {
      this.addRecord()
    },
    inputFilter(value) {
      value = value.replace(/[^\.\d]/g, '') // 清除"数字"和"."以外的字符
      value = value.replace(/^\./g, '') // 验证第一个字符是数字而不是.
      value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的.
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')// 只允许输入一个小数点
      value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
      value = value.replace(/\s+/g, '') // 清除空格
      return value
    },
    inputFilter1(value) {
      value = value.replace(/[^\d]/g, '') // 清除"数字"和"."以外的字符
      value = value.replace(/\s+/g, '') // 清除空格
      return value
    },
    // 前进
    doNext() {
      if (this.$store.getters.recordData.active === this.$store.getters.recordData.record.length) {
        this.$message('当前已经是初始一步了')
        return
      } else {
        this.$store.dispatch('setTableData/changeRecord', 1)
        this.getData = this.$store.getters.recordData.record[this.$store.getters.recordData.active - 1]
        this.$message({
          type: 'success',
          message: '前进成功!'
        })
      }
    },
    // 返回
    doPer() {
      if (this.$store.getters.recordData.active === 1) {
        this.$message({
          type: 'success',
          message: '当前已经是最后一步了!'
        })
        return
      } else {
        this.$store.dispatch('setTableData/changeRecord', -1)
        this.getData = this.$store.getters.recordData.record[this.$store.getters.recordData.active - 1]
        this.$message({
          type: 'success',
          message: '后退成功!'
        })
      }
    },
    // 数据变化 记住步骤
    addRecord() {
      this.$store.dispatch('setTableData/addRecord', JSON.parse(JSON.stringify(this.getData)))
    },
    // 取消按钮打印测试

    // 打印
    doPrint() {
      const subOutPrintButton = document.getElementById('printMe1')
      document.body.innerHTML = subOutPrintButton.innerHTML
      // document.getElementsByTagName('body')[0].style.zoom = 0.85
      window.print()
      window.location.reload()
    },
    // 绑定列切换
    changeColName(item) {
      this.activeCellData.Text = '[' + item.value + ']'
      this.addRecord()
    },
    // 绑定数据列数据
    bandDataBoxAdd() {
      this.bandDataBox = false
    },
    // 绑定数据点击下拉点击
    dataChooseListTableClick(row) {
      // console.log(222)
      this.bandData.choosheName = row.ProcedureName
      this.bandData.Describe = row.Describe
      this.bandData.showChoose = false
    },
    // 复制样式
    copyStyle() {
      if (this.activeElementID) {
        const copyData = JSON.parse(JSON.stringify(this.activeCellData))
        this.isCopy = true
        this.copystyleData = {
          Alignment: copyData.Alignment,
          Font: copyData.Font,
          Width: copyData.Width,
          Height: copyData.Height,
          ForeColor: copyData.ForeColor,
          PaddingTop: copyData.PaddingTop,
          PaddingRight: copyData.PaddingRight,
          PaddingBottom: copyData.PaddingBottom,
          PaddingLeft: copyData.PaddingLeft,
          Border: copyData.Border,
          BackColor: copyData.BackColor
        }
      } else {
        this.$message({
          type: 'info',
          message: '当前未选中单元格无法使用格式刷功能!'
        })
      }
    },
    // 拆分单元格
    splitGird() {
      if (this.activeElementID) {
        const data = this.getCellIndex()
        const itemCell = data.paragraphData[data.rowIndex].Cells[data.colIndex]
        if ((itemCell.RowSpan !== 1) || (itemCell.ColumnSpan !== 1)) {
          let width = 0
          let height = 0
          data.paragraphData.map((rowItem, indexRow) => {
            if (indexRow >= data.rowIndex && indexRow < data.rowIndex + data.RowSpan) {
              rowItem.Cells.map((colItem, indexCol) => {
                if (indexCol >= data.colIndex && indexCol <= data.colIndex + data.ColumnSpan) {
                  colItem.IsMerge = false
                  if (colItem.RowSpan > 1) {
                    colItem.Height = colItem.Height / colItem.RowSpan
                    colItem.RowSpan = 1
                  }
                  if (colItem.ColumnSpan > 1) {
                    colItem.Width = colItem.Width / colItem.ColumnSpan
                    colItem.ColumnSpan = 1
                  }
                  if (indexCol === data.colIndex && indexRow > data.rowIndex) {
                    height += colItem.Height
                  }
                  if (indexRow === data.rowIndex && indexCol > data.colIndex) {
                    width += colItem.Width
                  }
                }
              })
            }
          })
          // debugger
          itemCell.Width = itemCell.Width - width
          itemCell.Height = itemCell.Height - height
          itemCell.RowSpan = 1
          itemCell.ColumnSpan = 1
          this.addRecord()
        } else {
          this.$message({
            type: 'info',
            message: '当前选中单元格无法拆分!'
          })
        }
      } else {
        this.$message({
          type: 'info',
          message: '当前未选中单元格无法拆分!'
        })
      }
    },
    // 单元个合并
    submitMergeGrig() {
      if (this.activeElementID) {
        const data = this.getCellIndex()

        const columnSpan = parseInt(this.cellMergeData.ColumnSpan)
        const rowumnSpan = parseInt(this.cellMergeData.RowSpan)
        const allCol = data.paragraphData[0].Cells.length
        const allRow = data.paragraphData.length
        // 判断是否超出
        // debugger
        if (allCol < (data.colIndex + data.ColumnSpan + columnSpan)) {
          this.$message({
            type: 'info',
            message: '当前合并列数超出表格总列数!'
          })
          return
        }
        if (allRow < (data.rowIndex + data.RowSpan + rowumnSpan)) {
          this.$message({
            type: 'info',
            message: '当前合并行数超出表格总行数!'
          })
          return
        }

        // 循环获得最大合并行列
        // eslint-disable-next-line no-unused-vars
        let width = 0
        // const hasMargeCol = 0
        // eslint-disable-next-line no-unused-vars
        let height = 0
        // const hasMargeRow = 0
        const rowArr = new Array(data.paragraphData.length)// 合并行的数组
        let i = rowArr.length
        while (i--) { rowArr[i] = 0 }
        const colArr = new Array(data.paragraphData[0].Cells.length)// 合并列的数组
        let j = colArr.length
        while (j--) { colArr[j] = 0 }
        // debugger
        // console.log((data.rowIndex + data.RowSpan - 1 + rowumnSpan))
        // console.log((data.colIndex + data.ColumnSpan - 1 + columnSpan))
        data.paragraphData.map((item, index) => {
          if (index >= data.rowIndex && index <= (data.rowIndex + data.RowSpan - 1 + rowumnSpan)) {
            item.Cells.map((itemCell, indexCell) => {
              if (indexCell >= data.colIndex && indexCell <= (data.colIndex + data.ColumnSpan - 1 + columnSpan)) {
                if (!itemCell.IsMerge && ((index !== data.rowIndex) || (indexCell !== data.colIndex))) {
                  rowArr[index] += (itemCell.RowSpan - 1)
                  colArr[indexCell] += (itemCell.ColumnSpan - 1)
                }
              }
            })
          }
        })

        const maxRow = Math.max(...rowArr)
        const maxCol = Math.max(...colArr)
        const allColNum = data.ColumnSpan + columnSpan + maxCol
        const allRowNum = data.RowSpan + rowumnSpan + maxRow
        data.paragraphData.map((item, index) => {
          if (index >= data.rowIndex && index <= (data.rowIndex + allRowNum - 1)) {
            item.Cells.map((itemCell, indexCell) => {
              if (indexCell >= data.colIndex && indexCell <= (data.colIndex + allColNum - 1)) {
                if (!itemCell.IsMerge && (index === data.rowIndex) && (indexCell > data.colIndex)) {
                  width += itemCell.Width
                }
                if (!itemCell.IsMerge && (indexCell === data.colIndex) && (index > data.rowIndex)) {
                  height += itemCell.Height
                }
                if ((index === data.rowIndex) && (indexCell === data.colIndex)) {
                  itemCell.IsMerge = false
                  // console.log('不合并' + index + '==' + indexCell)
                } else {
                  // console.log('合并' + index + '==' + indexCell)
                  itemCell.IsMerge = true
                }
              }
            })
          }
        })
        // debugger
        data.paragraphData[data.rowIndex].Cells[data.colIndex].ColumnSpan = allColNum
        // data.paragraphData[data.rowIndex].Cells[data.colIndex].Width += width
        // data.paragraphData[data.rowIndex].Cells[data.colIndex].Height += height
        data.paragraphData[data.rowIndex].Cells[data.colIndex].RowSpan = allRowNum
        this.addRecord()
        this.cellMergeBox = false
      } else {
        this.$message({
          type: 'info',
          message: '当前未选中单元格无法合并!'
        })
      }
    },
    // 删除当前列
    deleteClo() {
      if (this.activeElementID) {
        this.$confirm('此操作将永久删除该列, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = this.getCellIndex()
          data.paragraphData.map((item, index) => {
            if (data.colIndex < index) {
              item.ColumnIndex = item.ColumnIndex - 1
            }
            item.Cells.splice(data.colIndex, 1)
          })
          console.log(data.paragraphData)
          this.addRecord()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '当前未选中单元格无法添加!'
        })
      }
    },
    // 向右添加一列
    addRightCol() {
      if (this.activeElementID) {
        const data = this.getCellIndex()
        // debugger
        data.paragraphData.map((item) => {
          let newColData
          item.Cells.map((itemCell, indexCell) => {
            if (data.colIndex === indexCell) {
              newColData = JSON.parse(JSON.stringify(itemCell))
              newColData.ID = this.genID()
              newColData.Text = ''
              newColData.IsMerge = false
              newColData.RowSpan = 1
              newColData.ColumnSpan = 1
              newColData.ColumnIndex = newColData.ColumnIndex + 1
            } else if (data.colIndex < indexCell) {
              itemCell.ColumnIndex = itemCell.ColumnIndex + 1
            }
          })
          item.Cells.splice(data.colIndex + 1, 0, newColData)
          console.log(data.paragraphData)
          this.addRecord()
        })
      } else {
        this.$message({
          type: 'info',
          message: '当前未选中单元格无法添加!'
        })
      }
    },
    // 向左添加一列
    addLeftCol() {
      if (this.activeElementID) {
        const data = this.getCellIndex()
        // debugger
        data.paragraphData.map((item) => {
          let newColData
          item.Cells.map((itemCell, indexCell) => {
            if (data.colIndex === indexCell) {
              newColData = JSON.parse(JSON.stringify(itemCell))
              newColData.ID = this.genID()
              newColData.Text = ''
              newColData.IsMerge = false
              newColData.RowSpan = 1
              newColData.ColumnSpan = 1
              itemCell.ColumnIndex = itemCell.ColumnIndex + 1
            } else if (data.colIndex < indexCell) {
              itemCell.ColumnIndex = itemCell.ColumnIndex + 1
            }
          })
          item.Cells.splice(data.colIndex, 0, newColData)
          console.log(data.paragraphData)
          this.addRecord()
        })
      } else {
        this.$message({
          type: 'info',
          message: '当前未选中单元格无法添加!'
        })
      }
    },
    // 删除一行
    deleteRow() {
      if (this.activeElementID) {
        this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = this.getCellIndex()
          data.paragraphData.map((item, index) => {
            if (index > data.rowIndex) {
              item.Cells.map((itemCell) => {
                itemCell.RowIndex = itemCell.RowIndex - 1
              })
            }
          })
          data.paragraphData.splice(data.rowIndex, 1)
          console.log(data.paragraphData)
          this.addRecord()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '当前未选中单元格无法添加!'
        })
      }
    },
    // 下方添加一行
    addRowBottom() {
      if (this.activeElementID) {
        const data = this.getCellIndex()
        const newRowData = JSON.parse(JSON.stringify(data.paragraphData[data.rowIndex]))
        newRowData.Cells.map((ietm) => {
          ietm.ID = this.genID()
          ietm.Text = ''
          ietm.IsMerge = false
          ietm.RowSpan = 1
          ietm.ColumnSpan = 1
          ietm.RowIndex = ietm.RowIndex + 1
        })

        data.paragraphData.map((item, index) => {
          if (index > data.rowIndex) {
            item.Cells.map((itemCell) => {
              itemCell.RowIndex = itemCell.RowIndex + 1
            })
          }
        })
        data.paragraphData.splice(data.rowIndex + data.RowSpan, 0, newRowData)
        console.log(data.paragraphData)
        this.addRecord()
      } else {
        this.$message({
          type: 'info',
          message: '当前未选中单元格无法添加!'
        })
      }
    },
    // 上方添加一行
    addRowTop() {
      if (this.activeElementID) {
        const data = this.getCellIndex()
        const newRowData = JSON.parse(JSON.stringify(data.paragraphData[data.rowIndex]))
        newRowData.Cells.map((ietm) => {
          ietm.ID = this.genID()
          ietm.Text = ''
          ietm.IsMerge = false
          ietm.RowSpan = 1
          ietm.ColumnSpan = 1
        })
        data.paragraphData.map((item, index) => {
          if (index >= data.rowIndex) {
            item.Cells.map((itemCell, indexCell) => {
              itemCell.RowIndex = itemCell.RowIndex + 1
            })
          }
        })
        data.paragraphData.splice(data.rowIndex, 0, newRowData)
        console.log(data.paragraphData)
        this.addRecord()
      } else {
        this.$message({
          type: 'info',
          message: '当前未选中单元格无法添加!'
        })
      }
    },
    // 获取激活单元格行列
    getCellIndex() {
      const page = this.getData.value.Pages[this.activePageIndex]
      const list = this.getPargraphIndex()
      const paragraphListBox = page[list.name][list.index].Rows
      const listIndex = { rowIndex: '', colIndex: '', RowSpan: '', ColumnSpan: '', paragraphData: paragraphListBox }
      paragraphListBox.map((rowItem, rowIndex) => {
        rowItem.Cells.map((colItem, colIndex) => {
          if (colItem.ID === this.activeElementID) {
            listIndex.rowIndex = rowIndex
            listIndex.colIndex = colIndex
            listIndex.RowSpan = colItem.RowSpan
            listIndex.ColumnSpan = colItem.ColumnSpan
          }
        })
      })
      return listIndex
    },
    // 删除段落
    deleteParagraph() {
      // const that = this
      // 判断有无活跃字段
      if (this.activeParagraphID) {
        this.$confirm('此操作将永久删除该段落, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const page = this.getData.value.Pages[this.activePageIndex]
          const list = this.getPargraphIndex()
          page[list.name].splice(list.index, 1)
          this.addRecord()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '当前未选中段落!'
        })
      }
    },
    // 添加段落点击
    addParagraph() {
      const item = this.setParagrarapdhData.getDAta
      const page = this.getData.value.Pages[this.activePageIndex]
      const topHeight = page.BorderTop
      const bottomHeight = page.BorderBottom
      const bodyHeight = page.Height - topHeight - bottomHeight - page.MarginTop - page.MarginBottom
      let topItemsHeight = 0
      // debugger
      page.Top.map((item) => {
        topItemsHeight = topItemsHeight + item.Height
      })
      let bottomItemsHeight = 0
      page.Bottom.map((item) => {
        bottomItemsHeight = bottomItemsHeight + item.Height
      })
      let bodyItemsHeight = 0
      page.Body.map((item) => {
        bodyItemsHeight = bodyItemsHeight + item.Height
      })
      // debugger
      if (this.setParagrarapdhData.setParagrarapdListValue) {
        if (parseInt(this.setParagrarapdhData.addPosition) === 0) {
          //  判断是否超高
          if (topHeight - topItemsHeight - item.Height < 0) {
            this.$message('页眉高度过小无法承载该段落，请修改')
          } else {
            page.Top.push(this.changPargraphID(item))
            page.BorderTop = page.BorderTop + item.Height
            this.addRecord()
            this.setParagrarapdBox = false
          }
        } else if (parseInt(this.setParagrarapdhData.addPosition) === 1) {
          //  判断是否超高
          if (bottomHeight - bottomItemsHeight - item.Height < 0) {
            this.$message('页脚高度过小无法承载该段落，请修改')
          } else {
            page.Bottom.push(this.changPargraphID(item))
            page.BorderBottom = page.BorderBottom + item.Height
            this.addRecord()
            this.setParagrarapdBox = false
          }
        } else if (parseInt(this.setParagrarapdhData.addPosition) === 2) {
          //  判断是否超高
          if (bodyHeight - item.Height < 0) {
            this.$message('主体高度过小无法承载该段落，请修改')
          } else {
            // 判断有无活跃字段
            if (this.activeParagraphID) {
              const list = this.getPargraphIndex()
              page[list.name].splice(list.index, 0, this.changPargraphID(item))
            } else {
              page.Body.push(this.changPargraphID(item))
            }
            this.addRecord()
            this.setParagrarapdBox = false
          }
        } else if (parseInt(this.setParagrarapdhData.addPosition) === 3) {
          //  判断是否超高
          if (bodyHeight - item.Height < 0) {
            this.$message('主体高度过小无法承载该段落，请修改')
          } else {
            // 判断有无活跃字段
            if (this.activeParagraphID) {
              const list = this.getPargraphIndex()
              page[list.name].splice(list.index + 1, 0, this.changPargraphID(item))
            } else {
              page.Body.push(this.changPargraphID(item))
            }
            this.addRecord()
            this.setParagrarapdBox = false
          }
        } else if (parseInt(this.setParagrarapdhData.addPosition) === 4) {
          //  判断是否超高
          if (bodyHeight - item.Height < 0) {
            this.$message('主体高度过小无法承载该段落，请修改')
          } else {
            page.Body.push(this.changPargraphID(item))
            this.addRecord()
            this.setParagrarapdBox = false
          }
        }
      } else {
        this.$message('请先选择参考模板和段落样式')
      }
    },

    createPargraph() {
      const item = this.setParagrarapdhData.addData
      const page = this.getData.value.Pages[this.activePageIndex]
      const topHeight = page.BorderTop
      const bottomHeight = page.BorderBottom
      const bodyHeight = page.Height - topHeight - bottomHeight - page.MarginTop - page.MarginBottom
      let topItemsHeight = 0
      // debugger
      page.Top.map((item) => {
        topItemsHeight = topItemsHeight + item.Height
      })
      let bottomItemsHeight = 0
      page.Bottom.map((item) => {
        bottomItemsHeight = bottomItemsHeight + item.Height
      })
      let bodyItemsHeight = 0
      page.Body.map((item) => {
        bodyItemsHeight = bodyItemsHeight + item.Height
      })
      const addTableData = {
        'ID': this.genID(),
        'PageID': page.ID,
        'PagePosition': 0,
        'SegmentIndex': 0,
        'Name': 'Page0_Top_Segment0',
        'SegmentAlignment': 7,
        'Width': Number(item.Width),
        'Height': Number(item.Height),
        'IsBindData': false,
        'Type': 0,
        'DataTableIndex': 0,
        'BindTableIndex': 0,
        'HColumnNamesString': null,
        'VColumnNamesString': null,
        'HSortNamesString': null,
        'NoDataIsShow': 1,
        'MarginLeft': Number(item.MarginLeft),
        'MarginRight': Number(item.MarginRight),
        'MarginTop': Number(item.MarginTop),
        'MarginBottom': Number(item.MarginBottom),
        'StyleSourceID': '1',
        'Margin': {
          'Top': Number(item.MarginTop),
          'Bottom': Number(item.MarginBottom),
          'Left': Number(item.MarginLeft),
          'Right': Number(item.MarginRight)
        },
        'Alignment': 4,
        'Rows': [],
        'DataRows': [
        ],
        'SegmentSorts': [
        ],
        'SegmentPosition': 0,
        'ClearBorder': false,
        'SegmentType': 0,
        'ColumnWidths': '[]',
        'ColumnHeights': '[',
        'HColumnNames': null,
        'VColumnNames': null,
        'HSortNames': null,
        'ViewWidth': false,
        'ViewHeight': false,
        'TableWidth': 0,
        'TableHeight': 0
      }
      for (let i = 0; i < item.RowNum; i++) {
        const row = { 'Cells': [] }
        for (let j = 0; j < item.SpanNum; j++) {
          // debugger
          const cell = {
            'ID': this.genID(),
            'SegmentID': addTableData.ID,
            'RowIndex': i,
            'RowSpan': 1,
            'ColumnIndex': j,
            'ColumnSpan': 1,
            'ColumnName': null,
            'CellSameMargeReferColumnName': null,
            'FontBold': false,
            'FontItalic': false,
            'FontName': '宋体',
            'FontSize': 3,
            'FontStrikeout': false,
            'FontUnderline': false,
            'ForeColor': '#000000',
            'CellIfSameMarge': 0,
            'IsAnchor': false,
            'IsMerge': false,
            'PaddingLeft': 0,
            'PaddingRight': 0,
            'PaddingTop': 0,
            'PaddingBottom': 0,
            'BorderLeft': j === 0 ? 0.2 : 0,
            'BorderRight': 0.2,
            'BorderTop': i === 0 ? 0.2 : 0,
            'BorderBottom': 0.2,
            'Width': Number(item.cellWidth),
            'Height': Number(item.lineHeight),
            'DrawHeight': 4,
            'OldSizeX': Number(item.cellWidth),
            'OldSizeY': Number(item.lineHeight),
            'Text': '',
            'CellTextAlign': 0,
            'Visible': true,
            'FormatDataType': 0,
            'Format': null,
            'FormatNullValue': null,
            'FormatTrueValue': null,
            'FormatFalseValue': null,
            'AnchorX': 0,
            'AnchorY': 0,
            'BackColor': '#FFFFFF',
            'UpMergeTermsCol': null,
            'CellDiagonal': 0,
            'CellType': 10,
            'IsAutoExtend': true,
            'Name': null,
            'Padding': {
              'Top': 0,
              'Bottom': 0,
              'Left': 0,
              'Right': 0
            },
            'Border': {
              'Top': i === 0 ? 0.2 : 0,
              'Bottom': 0.2,
              'Left': j === 0 ? 0.2 : 0,
              'Right': 0.2
            },
            'Size': {
              'IsEmpty': false,
              'X': 65,
              'Y': 4
            },
            'Font': {
              'Name': '宋体',
              'Size': 3,
              'Bold': false,
              'Italic': false,
              'Strikeout': false,
              'Underline': false
            },
            'Diagonal': 0,
            'InitText': null,
            'TextAlign': 0,
            'IfSameMarge': 0,
            'AnchorPosition': {
              'IsEmpty': false,
              'X': 0,
              'Y': 0
            },
            'ExpandProperty': {
              'Visible': '',
              'Bold': '',
              'BackColor': '',
              'ForeColor': '',
              'Format': '',
              'Underline': '',
              'TextAlign': '',
              'Size': ''
            },
            'TextFormat': {
              'DataType': 0,
              'Format': null,
              'NullValue': null,
              'TrueValue': null,
              'FalseValue': null
            },
            'Picture': null
          }
          row.Cells.push(cell)
        }
        addTableData.Rows.push(row)
      }

      if (parseInt(this.setParagrarapdhData.addPosition) === 0) {
        //  判断是否超高
        if (topHeight - topItemsHeight - item.Height < 0) {
          this.$message('页眉高度过小无法承载该段落，请修改')
        } else {
          page.Top.push(addTableData)
          page.BorderTop = page.BorderTop + item.Height
          this.addRecord()
          this.setParagrarapdBox = false
        }
      } else if (parseInt(this.setParagrarapdhData.addPosition) === 1) {
        //  判断是否超高
        if (bottomHeight - bottomItemsHeight - item.Height < 0) {
          this.$message('页脚高度过小无法承载该段落，请修改')
        } else {
          page.Bottom.push(addTableData)
          page.BorderBottom = page.BorderBottom + item.Height
          this.addRecord()
          this.setParagrarapdBox = false
        }
      } else if (parseInt(this.setParagrarapdhData.addPosition) === 2) {
        //  判断是否超高
        if (bodyHeight - item.Height < 0) {
          this.$message('主体高度过小无法承载该段落，请修改')
        } else {
          // 判断有无活跃字段
          if (this.activeParagraphID) {
            const list = this.getPargraphIndex()
            page[list.name].splice(list.index, 0, addTableData)
          } else {
            page.Body.push(addTableData)
          }
          // page.Body.push(addTableData)
          this.addRecord()
          this.setParagrarapdBox = false
        }
      } else if (parseInt(this.setParagrarapdhData.addPosition) === 3) {
        //  判断是否超高
        if (bodyHeight - item.Height < 0) {
          this.$message('主体高度过小无法承载该段落，请修改')
        } else {
          // 判断有无活跃字段
          if (this.activeParagraphID) {
            const list = this.getPargraphIndex()
            page[list.name].splice(list.index + 1, 0, addTableData)
          } else {
            page.Body.push(addTableData)
          }

          this.addRecord()
          this.setParagrarapdBox = false
        }
      } else if (parseInt(this.setParagrarapdhData.addPosition) === 4) {
        //  判断是否超高
        if (bodyHeight - item.Height < 0) {
          this.$message('主体高度过小无法承载该段落，请修改')
        } else {
          page.Body.push(JSON.parse(JSON.stringify(addTableData)))
          this.addRecord()
          this.setParagrarapdBox = false
        }
      }
    },
    // 获取激活段落id数组下标
    getPargraphIndex() {
      const list = { }
      getData.value.Pages.map((item) => {
        item.Top.map((itemTop, topIndex) => {
          if (itemTop.ID === this.activeParagraphID) {
            list.name = 'Top'
            list.index = topIndex
          }
        })
        item.Body.map((itemBody, bodyIndex) => {
          if (itemBody.ID === this.activeParagraphID) {
            list.name = 'Body'
            list.index = bodyIndex
          }
        })
        item.Bottom.map((itemBottom, bottomIndex) => {
          if (itemBottom.ID === this.activeParagraphID) {
            list.name = 'Bottom'
            list.index = bottomIndex
          }
        })
      })
      return list
    },
    // 修改获取到的段落ID
    changPargraphID(getItem) {
      const newItem = JSON.parse(JSON.stringify(getItem))
      newItem.ID = this.genID()
      newItem.Rows.map((itemTr, index) => {
        itemTr.Cells.map((itemTd, index) => {
          itemTd.SegmentID = newItem.ID
          itemTd.ID = this.genID()
        })
      })
      return newItem
    },
    // 清空添加段落
    clearParagrarapdListValue() {
      this.setParagrarapdhData.getDAta = {}
    },
    // 选中添加段落
    setParagrapChange(item) {
      // debugger
      this.setParagrarapdhData.getDAta = item
    },
    // 添加段落里面选择添加页面
    chooseListTableClick(row) {
      console.log(row.name)
      this.setParagrarapdhData.setParagrarapdListName = row.name

      this.setParagrarapdhData.isShowListData = false
    },
    // 删除页面
    deletPage() {
      const that = this
      this.$confirm('此操作将永久删除该页面, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // debugger
        for (let i = 0; i < that.getData.value.Pages.length; i++) {
          if (that.activePageData.PageIndex === that.getData.value.Pages[i].PageIndex) {
            that.getData.value.Pages.splice(i, 1)
            this.addRecord()
          }
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加页面确定
    addPageSubmit() {
      const newPage = JSON.parse(JSON.stringify(this.getData.value.Pages[0]))
      newPage.PaperSize = this.addPageData.PaperSize
      if (parseInt(newPage.PaperSize) === 1) {
        newPage.Width = 297
        newPage.Height = 420
      } else if (parseInt(newPage.PaperSize) === 2) {
        newPage.Width = 182
        newPage.Height = 257
      } else if (parseInt(newPage.PaperSize) === 3) {
        newPage.Width = 148
        newPage.Height = 210
      } else if (parseInt(newPage.PaperSize) === 4) {
        newPage.Width = 210
        newPage.Height = 279
      }
      newPage.PaperOrientation = this.addPageData.PaperOrientation
      newPage.BorderTop = this.addPageData.BorderTop
      newPage.BorderBottom = this.addPageData.BorderBottom
      newPage.MarginTop = this.addPageData.MarginTop
      newPage.MarginBottom = this.addPageData.MarginBottom
      newPage.MarginLeft = this.addPageData.MarginLeft
      newPage.MarginRight = this.addPageData.MarginRight
      newPage.PrintHeight = newPage.Height - newPage.MarginBottom - newPage.MarginTop
      newPage.PrintWidth = newPage.Width - newPage.MarginRight - newPage.MarginLeft
      newPage.Body = []
      newPage.Name = 'Page' + this.getData.value.Pages[this.getData.value.Pages.length - 1].PageIndex + 1

      newPage.PageIndex = this.getData.value.Pages[this.getData.value.Pages.length - 1].PageIndex + 1
      newPage.ID = this.genID()
      newPage.Top.map((item, index) => {
        item.PageID = newPage.ID
        item.ID = this.genID()
        item.Rows.map((itemTr, index) => {
          itemTr.Cells.map((itemTd, index) => {
            itemTd.SegmentID = item.ID
            itemTd.ID = this.genID()
          })
        })
      })
      newPage.Bottom.map((item, index) => {
        item.PageID = newPage.ID
        item.ID = this.genID()
        item.Rows.map((itemTr, index) => {
          itemTr.Cells.map((itemTd, index) => {
            itemTd.SegmentID = item.ID
            itemTd.ID = this.genID()
          })
        })
      })
      this.getData.value.Pages.push(newPage)
      this.addRecord()
      this.addPage = false
    },
    // 生成唯一ID
    genID() {
      return Number(Math.random().toString().substr(3, 8) + Date.now()).toString(36)
    },

    // 报表设置确定
    submitSetGrig() {
      this.getData.value.Name = this.setGirdBoxData.name
      this.getData.value.VerCode = this.setGirdBoxData.verCode
      this.addRecord()
      this.setGirdBox = false
    },
    // 点击左侧菜单显示弹窗
    girdSetClick(string) {
      this[string] = true
    },
    // 改变纸张方向
    changePaperOrientation(value) {
      this.activePageData.PaperOrientation = value
      const oldWidth = this.activePageData.Width
      const oldHeiht = this.activePageData.Height
      this.activePageData.Width = oldHeiht
      this.activePageData.Height = oldWidth
      this.activePageData.PrintHeight = this.activePageData.Height - this.activePageData.MarginBottom - this.activePageData.MarginTop
      this.activePageData.PrintWidth = this.activePageData.Width - this.activePageData.MarginRight - this.activePageData.MarginLeft
      this.addRecord()
    },
    // 改变页面大小
    cheangPageSize(value) {
      this.activePageData.PageSize = value
      if (parseInt(value) === 1) {
        this.activePageData.Width = 297
        this.activePageData.Height = 420
      } else if (parseInt(value) === 2) {
        this.activePageData.Width = 182
        this.activePageData.Height = 257
      } else if (parseInt(value) === 3) {
        this.activePageData.Width = 148
        this.activePageData.Height = 210
      } else if (parseInt(value) === 4) {
        this.activePageData.Width = 210
        this.activePageData.Height = 279
      }
      this.activePageData.PrintHeight = this.activePageData.Height - this.activePageData.MarginBottom - this.activePageData.MarginTop
      this.activePageData.PrintWidth = this.activePageData.Width - this.activePageData.MarginRight - this.activePageData.MarginLeft
      this.addRecord()
    },
    // 页面与段落选择
    activeParagrapChange(type, item) {
      // console.log(item)
      if (parseInt(type) === 1) {
        this.activePageData = item
        this.activePageID = item.ID
        this.activeParagraphID = ''
      } else if (parseInt(type) === 2) {
        this.activeParagraphData = item
        this.activeParagraphID = item.ID
      }
      this.activeType = type
      this.activeElement = item.ID
      this.activeElementID = ''
    },
    // 单元格点击
    cellClick(item, num) {
      this.activeCellData = item
      this.activeType = num// 当前活动类型
      this.activeElement = item.ID
      this.activeParagrapList = ''
      this.activeElementID = item.ID
      this.activeParagraphID = item.SegmentID
      if (this.isCopy) {
        item.Alignment = this.copystyleData.Alignment
        item.Font = this.copystyleData.Font
        item.Width = this.copystyleData.Width
        item.Height = this.copystyleData.Height
        item.ForeColor = this.copystyleData.ForeColor
        item.PaddingTop = this.copystyleData.PaddingTop
        item.PaddingRight = this.copystyleData.PaddingRight
        item.PaddingBottom = this.copystyleData.PaddingBottom
        item.PaddingLeft = this.copystyleData.PaddingLeft
        item.Border = this.copystyleData.Border
        item.BackColor = this.copystyleData.BackColor
        this.addRecord()
      }
      this.isCopy = false
    },
    // 段落点击
    paragraphClick(item, num) {
      // debugger
      this.activeParagraphData = item
      this.activeType = num// 当前活动类型
      this.activeElement = item.ID
      this.activeParagrapList = item.ID
      this.activeParagraphID = item.ID
      this.activePageID = item.PageID
      this.activeElementID = ''
    },
    // 页面点击
    pageClick(item, num) {
      this.activePageData = item// 当前活动的页面数据
      this.activeType = num// 当前活动类型
      this.activeElement = item.ID// 当前活动类名
      this.activeParagrapList = item.ID//
      this.activePageID = item.ID
      this.activeElementID = ''
      // debugger
      this.getData.value.Pages.map((itemPages, index) => {
        if (item.ID === itemPages.ID) {
          this.activePageIndex = index
        }
      })
    },
    // 把表格内的数据有换行的进行处理
    getText(cellValue) {
      if (cellValue) {
        return cellValue.toString().replace(/&lt;br&gt;/g, '</br>')
      } else {
        return ''
      }
    },
    //  打印时候表格数据的处理
    getTextShow(cellValue, id, type) {
      if (this.getDataPrint.value.ReportJSON.SysVariable[cellValue.Text]) {
        return this.getDataPrint.value.ReportJSON.SysVariable[cellValue.Text].toString().replace(/&lt;br&gt;/g, '</br>')
      } else {
        // console.log(cellValue.Text)
        if (cellValue.Text) {
          return cellValue.Text.toString().replace(/&lt;br&gt;/g, '</br>')
        } else {
          return ''
        }
      }
    },
    //  打印时候表单类型的展示数据
    getTextShowFree(cellValue, BindTableIndex) {
      if (!cellValue.ColumnName) {
        return cellValue.Text.toString().replace(/&lt;br&gt;/g, '</br>')
      } else {
        let text
        // this.getDataPrint.value.ReportJSON.ReportDataJSON[0].Tables[BindTableIndex]
        this.getDataPrint.value.ReportJSON.ReportDataJSON[0].Tables.map((items, index) => {
          if (items.Column[cellValue.ColumnName] > -1) {
            text = items.Rows[0][items.Column[cellValue.ColumnName]]
          }
        })
        return text
      }
    },
    //  打印时表格类型的数据展示 getTableIndex获得数据tables的角标 tdTemplate原始数据  pageBodyData页面数据
    getTable(getTableIndex, tdTemplate, pageData) {
      if (!getDataPrint.value.ReportJSON.ReportDataJSON[0].Tables[getTableIndex]) { return }
      const data = getDataPrint.value.ReportJSON.ReportDataJSON[0].Tables[getTableIndex].Rows
      const html = []
      function getStyle(tdItem) {
        let textLaign = 'center'
        let verticalAlign = 'middle'
        const Alignment = tdItem.TextAlign
        if (Alignment === 0 || Alignment === 3 || Alignment === 6) {
          textLaign = 'left'
        } else if (Alignment === 1 || Alignment === 4 || Alignment === 7) {
          textLaign = 'center'
        } else if (Alignment === 2 || Alignment === 5 || Alignment === 8) {
          textLaign = 'right'
        }
        if (Alignment === 0 || Alignment === 1 || Alignment === 2) {
          verticalAlign = 'top'
        } else if (Alignment === 3 || Alignment === 4 || Alignment === 5) {
          verticalAlign = 'middle'
        } else if (Alignment === 6 || Alignment === 7 || Alignment === 8) {
          verticalAlign = 'bottom'
        }
        let textDecoration = ''
        if (tdItem.Font.Underline) {
          textDecoration = textDecoration + 'underline '
        }
        if (tdItem.Font.Strikeout) {
          textDecoration = textDecoration + 'line-through '
        }
        if (textDecoration === '') {
          textDecoration = 'none'
        }
        // console.log(value)
        let style = ''
        style = style + 'width:' + tdItem.Width + 'mm;'
        style = style + 'height:' + tdItem.Height + 'mm;'
        style = style + 'text-align:' + textLaign + ';'
        style = style + 'color:' + tdItem.ForeColor + ';'
        style = style + 'padding-top:' + tdItem.PaddingTop + 'mm;'
        style = style + 'padding-right:' + tdItem.PaddingRight + 'mm;'
        style = style + 'padding-bottom:' + tdItem.PaddingBottom + 'mm;'
        style = style + 'padding-left:' + tdItem.PaddingLeft + 'mm;'
        style = style + 'font-family:' + tdItem.Font.Name + ';'
        style = style + 'font-size:' + tdItem.Font.Size + 'mm;'
        if (tdItem.Font.Bold) {
          style = style + 'font-weight:' + 'bold;'
        } else {
          style = style + 'font-weight:' + 'normal;'
        }
        if (tdItem.Font.Italic) {
          style = style + 'font-style:' + 'italic;'
        } else {
          style = style + 'font-style:' + 'normal;'
        }
        style = style + 'text-decoration:' + textDecoration + ';'
        style = style + 'vertical-align:' + verticalAlign + ';'
        style = style + 'border-top-width:' + tdItem.Border.Top + 'mm;'
        style = style + 'border-right-width:' + tdItem.Border.Right + 'mm;'
        style = style + 'border-bottom-width:' + tdItem.Border.Bottom + 'mm;'
        style = style + 'border-left-width:' + tdItem.Border.Left + 'mm;'
        style = style + 'border-color:#000;'
        style = style + 'border-style:solid;'
        style = style + 'white-space:pre-wrap;'
        style = style + 'background-color:' + tdItem.BackColor + ';'
        return style
      }
      function getText(cellValue) {
        if (cellValue) {
          return cellValue.toString().replace(/&lt;br&gt;/g, '</br>')
        } else {
          return ''
        }
      }
      html.push('<thead>')
      html.push('<tr>')
      tdTemplate.Rows[0].Cells.map((tdItem, tdIndex) => {
        if (!tdItem.IsMerge) {
          let className = ''
          if (tdItem.ClearBorder) {
            className = className + 'noBorder'
          }
          html.push('<td rowspan="' + tdItem.RowSpan + '" colspan="' + tdItem.ColumnSpan + '" style="' + getStyle(tdItem) + '" class="' + className + '">')
          html.push(getText(tdItem.Text))
          html.push('</td>')
        }
      })
      html.push('</tr>')
      html.push('</thead>')
      // html.push('<tfoot  >')
      // html.push('<tr>')
      // tdTemplate.Rows[0].Cells.map((tdItem, tdIndex) => {
      //   if (!tdItem.IsMerge) {
      //     let className = ''
      //     if (tdItem.ClearBorder) {
      //       className = className + 'noBorder'
      //     }
      //     html.push('<td rowspan="' + tdItem.RowSpan + '" colspan="' + tdItem.ColumnSpan + '" style="' + getStyle(tdItem) + '" class="' + className + '">')
      //     html.push(getText(tdItem.Text))
      //     html.push(getText(155))
      //     html.push('</td>')
      //   }
      // })
      // html.push('</tr>')
      // html.push('</tfoot>')
      html.push('<tbody>')

      function getRowIndex(row, col) {
        if (!rows[row][col].isMarge) {
          rows[row][col].RowSpan++
        } else {
          const index = row - 1
          getRowIndex(index, col)
        }
      }
      function getColIndex(cells, col) {
        if (!cells[col].isMarge) {
          cells[col].columnSpan++
        } else {
          const index = col - 1
          getColIndex(cells, index)
        }
      }
      const cellData = tdTemplate.Rows[tdTemplate.Rows.length - 1].Cells
      const rows = []

      for (let i = 0; i < data.length; i++) {
        const cells = []
        for (let j = 0; j < cellData.length; j++) {
          if (cellData[j].CellIfSameMarge === 0) {
            const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: false, style: getStyle(cellData[j]) }
            cells.push(cell)
          } else if (cellData[j].CellIfSameMarge === 1) {
            if (i > 0) {
              if (data[i][j] === data[i - 1][j]) {
                getRowIndex(i - 1, j)
                const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: true, style: getStyle(cellData[j]) }
                cells.push(cell)
              } else {
                const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: false, style: getStyle(cellData[j]) }
                cells.push(cell)
              }
            } else {
              const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: false, style: getStyle(cellData[j]) }
              cells.push(cell)
            }
          } else if (cellData[j].CellIfSameMarge === 2) {
            if (j > 0) {
              if (data[i][j] === cells[j - 1].cellText) {
                getColIndex(cells, j - 1)
                const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: true, style: getStyle(cellData[j]) }
                cells.push(cell)
              } else {
                const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: false, style: getStyle(cellData[j]) }
                cells.push(cell)
              }
            } else {
              const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: false, style: getStyle(cellData[j]) }
              cells.push(cell)
            }
          }
          // console.log(cells)
        }
        // console.log(rows)
        rows.push(cells)
      }
      const cellHeight = tdTemplate.Rows[tdTemplate.Rows.length - 1].Cells[0].Height
      const itemIndex = tdTemplate.SegmentIndex
      let topHeight = 0
      for (var i = 0; i < itemIndex; i++) {
        topHeight = topHeight + pageData.Body[i].Height + 0.4
      }
      topHeight = topHeight + tdTemplate.Rows[0].Cells[0].Height + 0.4
      const maxHeight = pageData.PrintHeight - pageData.BorderTop - pageData.BorderBottom - topHeight
      const rowNum = Math.floor(maxHeight / (cellHeight + 0.2))
      // debugger
      if (rows.length <= rowNum) {
        rows.map((item, index) => {
          html.push('<tr>')

          item.map((cell, index) => {
            if (!cell.isMarge) {
              html.push('<td rowspan="' + cell.RowSpan + '" colspan="' + cell.columnSpan + '" style="' + cell.style + '">')
              html.push(cell.cellText)
              html.push('</td>')
            }
          })
          html.push('</tr>')
        })

        html.push('</tbody>')
        html.push('<table>')
      } else {
        // for (var i = 0; i < rowNum; i++) {
        //   html.push('<tr>')
        //   for (var j = 0; j < rows[i].length; j++) {
        //     if (!rows[i][j].isMarge) {
        //       html.push('<td rowspan="' + rows[i][j].RowSpan + '" colspan="' + rows[i][j].columnSpan + '" style="' + rows[i][j].style + '">')
        //       html.push(rows[i][j].cellText)
        //       html.push('</td>')
        //     }
        //   }
        //   html.push('</tr>')
        // }
        rows.map((item, index) => {
          html.push('<tr>')
          item.map((cell, index) => {
            if (!cell.isMarge) {
              html.push('<td rowspan="' + cell.RowSpan + '" colspan="' + cell.columnSpan + '" style="' + cell.style + '">')
              html.push(cell.cellText)
              html.push('</td>')
            }
          })
          html.push('</tr>')
        })
        html.push('</tbody>')
        // html.push('<table>')
        // this.addPageSubmit()
      }
      // return ""
      return html.join(' ')
    }

  }
}
</script>
<style>
body {
  /*text-align: center;*/
}
</style>
<style scoped lang="scss">

.setTableBox {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: 宋体, Arial, Serif,serif;
  //box-sizing: content-box;

  .oneMenuBox {
    height: 50px;
    display: flex;
    background: #739fad;

    .oneMenuItem {
      display: flex;
      flex-flow: column;
      flex-wrap: wrap;
      width: 50px;
      align-items: center;
      justify-content: center;
      //border: 1px solid #e3e3e3;
      margin-right: 8px;
      //background: rgba(220, 220, 220, 0.87);
      cursor: pointer;

      .icon {
        font-size: 16px;
      }

      .title {
        color: #666666;
        font-size: 12px;
        margin-top: 5px;
      }
    }

  }

  .content {
    height: calc(100% - 50px);

    .leftBox {
      height: 100%;
      width: 80px !important;

      .twoMenuBox {
        height: 100%;
        background: #7c8f7c;
        padding-top: 15px;
        overflow: auto;

        .twoMenuItem {
          margin: 0 auto 10px auto;
          width: 30px;
          height: 30px;
          text-align: center;
          //background: #6e6c6c;
          cursor: pointer;

          .icon {
            font-size: 20px;
            margin-top: 5px;
            color: #e3e2e2;
          }

        }
      }
    }

    .centerBox {
      width: calc(100% - 370px) !important;
      height: 100%;
      overflow: auto;
      text-align: center;
      background-color: ButtonFace;

      .isActive {
        background-color: #dec79e !important;
      }

      .pagesBox {
        margin: 0 auto;
        overflow: auto;
        background-color: #f0f0ff;
        border: 0.2mm solid #000;
        .tableBox{
          //background-color: #e6e6e6;
          text-align: center;
          .tableItems{
            display: inline-table;
            background-color: #CCFFFF ;
            //height: auto !important;
            .tables{
              display: inline-block;
              margin: 0;
              padding: 0;
              border-collapse: collapse;
              border-spacing: 0;
              //display: inline-table;
              tr {
                padding: 0;

                td {
                  padding: 0;
                  //box-sizing:border-box;
                  //-moz-box-sizing:border-box; /* Firefox */
                  //-webkit-box-sizing:border-box; /* Safari */
                  //background: #fff url() no-repeat 100% center;

                  //position: relative;
                  //.line{
                  //  position: absolute;
                  //  width: 100%;
                  //  height: 100%;
                  //  left: 0;
                  //  top: 0;
                  //}
                  //&::before{
                  //  content: "";
                  //  position: absolute;
                  //  width: 1px;
                  //  height:100%;/*这里需要自己调整，根据td的宽度和高度*/
                  //  top:0;
                  //  left:0;
                  //  background-color: #0a0a0a;
                  //  transform: rotate(-72deg);/*这里需要自己调整，根据线的位置*/
                  //  transform-origin: top;
                  //}
                }

                .noBorder {
                  border: none !important;
                }
                .crosshair{
                  cursor: crosshair;
                }
              }
            }
          }
        }
        .topBox {
          //height: auto !important;
          .topItem {
            &:first-child {
              //margin-top: 0.19mm;
            }
          }

        }

        .bodyBox {
          background-color: #ffffff;
          //.topItem{
          //  background-color: #83c1da;
          //}
        }

        .bottomBox {
          //background-color: #e6e6e6;
        }
      }
    }

    .rightBox {
      width: 290px !important;
      height: 100%;
      overflow: auto;

      .pageChooseBox {
        display: flex;
        align-items: center;
        margin: 15px 0;

        .pageChoose {
          font-size: 14px;
          color: #606266;
          width: 95px;
        }
      }

      ::v-deep .el-form-item {
        margin-bottom: 5px;
      }
    }
  }

  .dialogBox {
    .dialogForm {
      .showParagrarapdh {
        width: 100%;
        height: 100%;
        overflow: auto;
        text-align: center;

      }

    }
    ::v-deep .el-dialog__footer{
      padding-top: 0;
    }

    .dialog-footer {
      text-align: center;
      //padding-top: 0;

    }
  }
}
.isActive {
  background-color: #dec79e !important;
}
.printBox{
  display: none;
}
.pagesBox {
  margin: 0 auto;
  .tableBox{
    //background-color: #e6e6e6;
    text-align: center;
    .tableItems{
      display: inline-table;
      //background-color: #CCFFFF ;
      //height: auto !important;
      .tables{
        //display: inline-block;
        margin: 0;
        padding: 0;
        border-collapse: collapse;
        border-spacing: 0;
        page-break-inside: avoid;
        //page-break-after:always;
        //display: inline-table;
        tr {
          padding: 0;
          //page-break-inside: avoid;
          td {
            padding: 0;
            //box-sizing:border-box;
            //-moz-box-sizing:border-box; /* Firefox */
            //-webkit-box-sizing:border-box; /* Safari */
            //page-break-inside:avoid;
            //page-break-after:auto
            //word-break: break-all;
          }

          .noBorder {
            border: none !important;
          }
          .crosshair{
            cursor: crosshair;
          }
        }
      }
    }
  }
  .topBox {
    height: auto !important;
    .topItem {
      &:first-child {
        //margin-top: 0.19mm;
      }
    }

  }

  .bodyBox {
    background-color: #ffffff;
    //.topItem{
    //  background-color: #83c1da;
    //}
  }

  .bottomBox {
    background-color: #e6e6e6;
  }
}
</style>
<style>
@media print {
  @page{
    /*size:  auto;*/
    /*margin: 4mm;*/
  }
  .page-break {
    /*page-break-before: always;*/
    /*page-break-after: always;*/
  }
  table{
    border-collapse: collapse;
    border-spacing: 0;
  }
  tr{
    /*page-break-inside: avoid;*/
    /*page-break-after:auto*/
  }
  td{
    /*word-break: break-all;*/
  }
}
</style>
